three.js

www.hewebgl.com/article/art… Threejs基础教程 www.webgl3d.cn/ Threejs中文网 www.webgl3d.cn/Three.js/

太阳系代码学习:

www.javashuo.com/article/p-u…

blog.csdn.net/qq_30100043… 点击判断

材质的区别

MeshNormalMaterial MeshLambertMaterial

MeshLambertMaterial: blog.csdn.net/qq_30100043…

网格法向量材质不支持 color 属性

function choose(event) {
   img.src = ''
   chooseMesh = null
   var Sx = event.clientX
   var Sy = event.clientY

   //归一化 坐标
   var x = (Sx / window.innerWidth) * 2 - 1
   var y = -(Sy / window.innerHeight) * 2 + 1

   var raycaster = new THREE.Raycaster()
   raycaster.setFromCamera(new THREE.Vector2(x, y), camera)
   //intersectsArr 可能会点中的实体
   var intersects = raycaster.intersectObjects(intersectsArr, false)
   if (intersects.length > 0) {
       console.log(intersects[0].object.name)
       img.src = './UI/标签/' + intersects[0].object.name + '.png'
       chooseMesh = intersects[0].object
   }
}
addEventListener('click', choose)

点光源的位置和target 确定了 平行光的方向;

平行光的方向是从它的位置到目标位置。默认的目标位置为原点  (0,0,0) 。

// 平行光 var directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算 directionalLight.position.set(80, 100, 50); 
// 方向光指向对象网格模型mesh2，可以不设置，默认的位置是0,0,0 directionalLight.target = mesh2; scene.add(directionalLight);

three.js editor 可以查看gltf 格式的