先放几个关键词：scene,light,model,material,mapandtexture,camera,renderer。然后我就开始假装解释：老天爷说，一定要有戏！所以有一个场景，这个场景包含了所有这些东西。上帝说，要有光！所以有了光，光能照亮广阔天地，否则就是一片漆黑。上帝觉得元气不足，就从泥土里捏了一个小人，不是亚当，而是小芳。老天爷左右看了看，这小芳天生帅气，五官精致，大长腿，这才叫模特；小芳虽然不是水做的，但她的皮肤在晨光下显得脆弱，这才叫物质；上帝莫名害羞了，摆摆手穿上了一件黑色长发的格子连衣裙，这叫贴图和质感；上帝的嘴巴沉默着却充满了喜悦，他默默地看着自己的作品，上帝的视角在这一刻仿佛是固定的，上帝的眼睛就是照相机；上帝所见，是世界进入眼帘后，经过大脑冥想计算出来的，而这颗聪明高效的大脑，就是渲染器。接下来，提前恭喜你，可以成为这个网页3D世界的小神了。【此段转自https://juejin.im/post/5b0ace...】camera和轨迹球（trackball）的绑定在导入obj和mtl文件时出现贴图问题。是否可以在3dsmax中预处理obj文件的导入？Three.js中设置旋转点dat.GUIThree.js中有两种材质可以响应光源：MeshLamberMaterial和MeshPhoneMaterial需要在渲染器、每个物体、每个光源上开启渲染阴影。生成阴影：renderer.shadowMapEnabled=true；只修改这里不会有什么区别，还要指定哪个物体需要阴影：plane.receiveShadow=true;cube.castShadow=true;sphere.castShadow=true;一般来说，环境光（AmbientLight）是场景中唯一的光源。环境光可以附加到场景中的每个对象。没有位置的概念。它主要用于优化硬色和阴影??。点光源（PointLight）向四面八方发射光并且不会产生投影，类似于夜空中的耀斑聚光灯光源（SpotLight），发出的光是一个圆锥体，可以配置光强度的衰减distance，可以设置阴影方向光/平行光（DirectinaLight）：模拟太阳光源，所有的光线相互平行，不会像聚光灯一样离目标越远越暗，有许多与聚光灯光源相同的特性。两种特殊光源：HemisphereLight，为户外场景打造更自然的光效；AreaLight，它从一个大平面而不是一个点发出光。对于稍微高一点的性能要求，可以使用影响光照的WebGL延迟渲染器材质：MeshPhongMaterial和MeshLambertMaterial。鼠标是PC端的主要交互方式（移动端是touch），我们经常用它来选择页面上的元素。对于Three.js，它没有类似DOM的层级关系，处于三维环境中，所以我们需要使用以下方法来判断一个对象是否被选中。*根据屏幕上的点击位置创建一个THREE.Vector3向量。*使用vector.unproject方法将屏幕上的点击位置转换为Three.js场景中的坐标。也就是说，就是将屏幕坐标转换成3D场景中的坐标。*创建THREE.Raycaster。使用THREE.Raycaster将光线投射到场景中。在下面的示例中，光线从相机的位置(camera.position)发射到场景中的鼠标单击位置。*使用raycaster.intersectObjects方法判断指定的物体中有哪些被射线照射，返回一个数组，包含所有被射线照射的物体的信息（根据离相机的远近，从短到长排序）。数组子项的信息包括：distance:49.90470face:THREE.Face3faceIndex:4object:THREE.Meshpoint:THREE.Vector3首先要知道动画的原理，其实就是循环绘制.需要实现当鼠标移动到绘图区域时对象停止旋转，添加鼠标事件监听鼠标位置，然后停止动画运行。THREE.Linegeometry不能用普通材质覆盖，只有THREE》LineBasicMaterial或THREE.LineDashedMaterialOpenGL,WebGL,JS,H5Contact:https://blog.csdn.net/vanessa...WebGL:https://webglfundamentals.org。..中文手册：http://techbrood.com/threejs/...详细介绍：https://segmentfault.com/a/11...捕获点击对象（Raycaster类）：https://blog.csdn.net/darkpro...://www.cnblogs.com/w-wanglei/p/6821036.htmlWebGL优秀案例：https://segmentfault.com/a/11...加载模型选择案例：http:///127.0.0.1:8080/examples/#webgl_postprocessing_outlinethree.js性能优化：https://chenjy1225.github.io/...OBJ文件格式详解：https://blog.csdn.net/szchtx/...Blender基本操作：https://blog.csdn.net/superli...://blog.csdn.net/bulademian/article/details/78623900自适应窗口大小window.addEventListener('resize',onResize,false)functiononResize(){//设置透视相机的纵横比camera.aspect=window.innerWidth/window.innerHeight//camera的position和target会自动更新，而fov,aspect,near,far的修改需要重新计算投影矩阵（projectionmatrix）camera.updateProjectionMatrix()//设置canvas输出的大小渲染器renderer.setSize(window.innerWidth,window.innerHeight)}
