随笔分类 - three.js
摘要：var width = document.getElementById("models-container").clientWidth; var height = document.getElementById("models-container").clientHeight; debugger /
阅读全文
摘要：window.addEventListener('resize', () => { var width = document.getElementById("models-container").clientWidth; var height = document.getElementById("m
阅读全文
摘要：const axesHelper = new THREE.AxesHelper(100); scene.add(axesHelper);
阅读全文
摘要：// 获取物体的材质 var material = tempObj.material; // 如果物体使用了多材质，可以通过索引访问特定材质，例如访问第一个材质 if (Array.isArray(material)) { material = material[0]; } var color =
阅读全文
摘要：/** * @author mrdoob / http://mrdoob.com/ */ THREE.CSS2DObject = function ( element ) { THREE.Object3D.call( this ); this.element = element; this.elem
阅读全文
摘要：var width = $('#models-container').width(); var height = $('#models-container').height(); var scene = new THREE.Scene(); var camera = new THREE.Perspe
阅读全文
摘要：不应用使用 scene.add(); 应该使用克隆对象的父节点添加
阅读全文
摘要：var parent = brick.parent; parent.remove(brick); const children = brick.children; if (!children) return; children.forEach(({ geometry, material, child
阅读全文
摘要：const materials = object.children.map(child => child.material); materials.forEach(material => { //// 检查材质是否有纹理 //debugger //if (material && material.m
阅读全文
摘要：阴影粗糙 如阴影边缘的形状呈块状，可以增加 shadow.mapSize.width 和shadow.mapSize.height。 或者保证用于计算阴影的区域紧密包围在对象周围，可以通过 shadow.camera.far、shadow.camera.near、shadow.camera.fov属
阅读全文
摘要：CameraHelper SpotLightHelper 可以使用如上辅助对象调试 const spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 10, 10, 10 ); scene.add( spotLigh
阅读全文
摘要：position 该属性决定该对象相对于父对象的位置 rotation 该属性可以设置绕每个轴的旋转 在数学上，物体旋转一周的弧度值为 2π 如果需要使用度数（0到360度），那么需要对度数做如下转换 var deg = 45; var val = deg * (Math.PI / 180) tra
阅读全文
摘要：Scene 常用方法 add remove children getObjectByName traverse (遍历每一个子对象，包括子对象的子对象) 给场景添加雾化效果 使用 fog 属性就可以为整个场景添加雾化效果 雾化效果是：场景中的物体离摄像机越远就会变得越模糊。 scene.fog =
阅读全文
摘要：renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true, }); logarithmicDepthBuffer, 官方解释: 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有
阅读全文
摘要：window.addEventListener("resize", onResize, false); function onResize() { camera.aspect = window.innerWidth / window.innerHeight; //更新屏幕的长宽比 camera.up
阅读全文
摘要：导入控制器 import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; 代码 document.body.appendChild(renderer.domElement); function rend
阅读全文
摘要：旋转立方体 function renderScene(){ cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; requestAnimationFrame(renderScene); stats.upd
阅读全文
摘要：渲染阴影 由于渲染阴影需要耗费大量的计算资源，所以默认情况下 Three.js 中是不会渲染阴影的，为了渲染阴影效果，需要告诉渲染器需要阴影效果 renderer.shadowMap.enabled = true; 指定阴影的光源 spotLight.castShadow = true; //产生阴
阅读全文
摘要：var renderer = new THREE.WebGLRenderer({ antialias: true, //开启锯齿 alpha: true }); // 设置背景颜色 renderer.setClearColor(0x000000,0); //0是完全透明，1是不透明 // 黑色 re
阅读全文
摘要：function initChart(){ // // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init( $("<canvas width='512' height='512'></canvas>")[0] ); // 绘制图表 myChart.s
阅读全文
浙公网安备 33010602011771号