🌓
搜索
 找回密码
 立即注册

Three.js入门学习

塞上雪狼 2022-10-9 09:32:40 15219
返回列表 发新帖
塞上雪狼
Three.js入门

定义

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
资源结构

225145axxuoque7mf8qukx.png

引入方式


  • 相对路径引入
  1. <script></script>
复制代码

  • 绝对路径远程加载
  1. <script></script>
复制代码
开始第一个three.js项目

  2.  - 创建场景对象scene
  3.  - 创建网格模型
  4.  - 设置光源
  5.  - 设置相机
  6.  - 创建渲染器对象
  8. //创建场景对象scene
  9. var scene = new THREE.Scene();
  10. //创建网格模型
  11. //创建一个立方体几何对象Geometry
  12. var geometry = new THREE.BoxGeometry(100, 100, 100);  
  13. // 创建材质对象
  14.  var mesh = new THREE.Mesh(geometry, material); 
  15. // 将网格模型添加到场景中
  16. scene.add(mesh)
  17. //设置光源
  18. // 光源类型
  19. //点光源
  20. var point = new THREE.PointLight(0xffffff);
  21.     point.position.set(400, 200, 300); //点光源位置
  22.     scene.add(point); //点光源添加到场景中
  25. //设置相机
  26. var width = window.innerWidth; //窗口宽度
  27.     var height = window.innerHeight; //窗口高度
  28.     var k = width / height; //窗口宽高比
  29.     var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  30.     //创建相机对象
  31.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  32.     camera.position.set(200, 300, 200); //设置相机位置
  33.     camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  34. //创建渲染器对象
  35. var renderer = new THREE.WebGLRenderer();
  36.     renderer.setSize(width, height);//设置渲染区域尺寸
  37.     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  38.     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  39.     //执行渲染操作   指定场景、相机作为参数
  40.     renderer.render(scene, camera);
复制代码
three.js程序结构

225145njv9eh2nvnm9v2cw.png

常用材质介绍



  • 点材质 – PointMaterial
  • 线材质

    • LineBasicMaterial 线基础材质
    • LineDashedMaterial 虚线材质

  • 网格材质

    • MeshBasicMaterial 网格基础材质
    • MeshLamberMaterial 网格lamber材质 暗淡、瞒反射
    • MeshPhonegMaterial 网格Phong材质 高亮表面、镜面反射
    • MeshDepthMaterial 网格深度材质
    • MeshNormalMaterial 网格法向量材质
    • PBR材质

  • 精灵材质 SpriteMaterial
  • 自定义着色器材质

    • RawShadderMaterial
    • ShaderMaterial

常用光源


  • 环境光 AmbientLight
  1. //环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
  2. var ambient = new THREE.AmbientLight(0x444444);
  3. scene.add(ambient);//环境光对象添加到scene场景中
复制代码

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

  • 点光源 PointLight
  1. //点光源
  2. var point = new THREE.PointLight(0xffffff);
  3. //设置点光源位置，改变光源的位置
  4. point.position.set(400, 200, 300);
  5. scene.add(point);
复制代码

  • 聚光灯光源 SpotLight
  1. // 聚光光源
  2. var spotLight = new THREE.SpotLight(0xffffff);
  3. // 设置聚光光源位置
  4. spotLight.position.set(200, 200, 200);
  5. // 聚光灯光源指向网格模型mesh2
  6. spotLight.target = mesh2;
  7. // 设置聚光光源发散角度
  8. spotLight.angle = Math.PI / 6
  9. scene.add(spotLight);//光对象添加到scene场景中
复制代码

  • 基类Light
常见几何体

225145vz7am69h67zpmm6h.png

常用曲线

225146paq4ynp6qq2k1145.png

上两图摘自 http://www.webgl3d.cn/Three.js/
案例


  • 225146nvmtj6eqp8peeprq.png 

  1.         My first three.js app        <script></script>
  3.     <script>        var scene = new THREE.Scene();        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);        var renderer = new THREE.WebGLRenderer();        renderer.setSize(window.innerWidth, window.innerHeight);        document.body.appendChild(renderer.domElement);        var geometry = new THREE.BoxGeometry(1, 1, 1);        var material = new THREE.MeshLambertMaterial({            color: 0x00ff00        });        var cube = new THREE.Mesh(geometry, material);        scene.add(cube);        camera.position.z = 5;        var spotLight = new THREE.SpotLight(0xffffff);        spotLight.position.set(-40, 60, -10);        scene.add(spotLight)        function animate() {            requestAnimationFrame(animate);            cube.rotation.x += 0.01;            cube.rotation.y += 0.04;            renderer.render(scene, camera);            renderer.setClearColor(new THREE.Color(0x0023a0, 1.0));            renderer.shadowMap.enabled = true;        }        animate();    </script>
复制代码

  • 225147ypvm8k947km0m9lm.png 

  1.  var scene = new THREE.Scene();
  2.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  3.         camera.position.x = -30;
  4.         camera.position.y = 40;
  5.         camera.position.z = 30
  6.         camera.lookAt(scene.position);
  7.         var renderer = new THREE.WebGLRenderer();
  8.         renderer.setSize(window.innerWidth, window.innerHeight);
  9.         document.body.appendChild(renderer.domElement);
  10.         renderer.setClearColor(new THREE.Color(0x000000));
  11.         renderer.setSize(window.innerWidth, window.innerHeight);
  12.         renderer.shadowMap.enabled = true;
  13.         var axes = new THREE.AxesHelper(20);
  14.         scene.add(axes);
  15.         var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
  16.         var planeMaterial = new THREE.MeshLambertMaterial({
  17.             color: 0xcccccc
  18.         });
  19.         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  20.         plane.rotation.x = -0.5 * Math.PI;
  21.         plane.position.x = 15
  22.         plane.position.y = 0
  23.         plane.position.z = 0
  24.         scene.add(plane);
  25.         plane.receiveShadow = true;
  26.         var geometry = new THREE.BoxGeometry(4, 4, 4);
  27.         var material = new THREE.MeshLambertMaterial({
  28.             color: 0x00ff00
  29.         });
  30.         var cube = new THREE.Mesh(geometry, material);
  31.         cube.position.x = 0;
  32.         cube.position.y = 2;
  33.         cube.position.z = 0;
  34.         cube.castShadow = true;
  35.         scene.add(cube);
  36.         const light = new THREE.DirectionalLight('#5fe', 1)
  37.         light.position.set(10, 10, 20)
  38.         var spotLight = new THREE.PointLight(0x33ffff);
  39.         spotLight.position.set(40, 10, 30);
  40.         spotLight.shadowCameraNear = 2;
  41.         spotLight.shadowCameraFar = 200;
  42.         spotLight.distance = 0;
  43.         spotLight.angle = 0.4;
  44.         scene.add(light);
  45.         scene.add(spotLight)
  46.         spotLight.castShadow = true;
  47.         var stats = new Stats();
  48.         stats.showPanel(0);
  49.         document.body.appendChild(stats.dom);
  50.         var sphereGeometry = new THREE.SphereGeometry(4, 100, 100)
  51.         var sphereMeterial = new THREE.MeshLambertMaterial({
  52.             color: '#d4237a'
  53.         })
  54.         sphere = new THREE.Mesh(sphereGeometry, sphereMeterial)
  55.         sphere.position.x = 8;
  56.         sphere.position.y = 6;
  57.         sphere.position.z = 2;
  58.         sphere.castShadow = true;
  59.         scene.add(sphere);
  60.         var sphereGeometry2 = new THREE.SphereGeometry(3, 30, 30)
  61.         var sphereMeterial2 = new THREE.MeshLambertMaterial({
  62.             color: '#abf45a'
  63.         })
  64.         sphere2 = new THREE.Mesh(sphereGeometry2, sphereMeterial2)
  65.         sphere2.position.x = 0;
  66.         sphere2.position.y = 1;
  67.         sphere2.position.z = 5;
  68.         sphere2.castShadow = true;
  69.         scene.add(sphere2);
  70.         var step = 0;
  71.         var step2 = 0;
  73.         function animate() {
  75.             cube.rotation.x += 0.09;
  76.             cube.rotation.y += 0.04;
  77.             // sphere.position.x = 20 + (10 * Math.cos(step));
  78.             sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)))
  79.             step += 0.02
  80.             step2 += 0.05
  81.             sphere2.position.x = 2 + (10 * Math.cos(step2));
  82.             sphere2.position.z = 2 + (10 * Math.abs(Math.sin(step2)))
  83.             requestAnimationFrame(animate);
  84.             renderer.render(scene, camera);
  87.             renderer.shadowMap.enabled = true;
  88.         }
  89.         animate();
复制代码

  • 225147kao2g222kpxsoa2f.png

    贴图采用base64编码，太长了，代码省略了
  1.  var scene = new THREE.Scene() //初始化场景
  2.         var camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 100000);
  3.         camera.position.set(50, 20, 1500);
  4.         var renderer = new THREE.WebGLRenderer({
  5.             alpha: true,
  6.             antialias: true
  7.         })
  8.         renderer.setSize(window.innerWidth, window.innerHeight);
  9.         var orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);
  10.         document.body.appendChild(renderer.domElement);
  11.         var sunTexture = THREE.ImageUtils.loadTexture('编码', {}, function() {
  12.             renderer.render(scene, camera);
  13.         }))
  14.         var earthTexture = THREE.ImageUtils.loadTexture('编码', {}, function() {
  15.             renderer.render(scene, camera);
  16.         })
  17.         var sphereGeometry = new THREE.SphereGeometry(20, 30, 30)
  18.         var sphereMaterial = new THREE.MeshBasicMaterial({
  19.             map: sunTexture
  20.         })
  21.         centerBall = new THREE.Mesh(sphereGeometry, sphereMaterial);
  22.         scene.add(centerBall)
  23.         var eartheGeometry = new THREE.SphereGeometry(120, -30, -30)
  24.         var earthMaterial = new THREE.MeshBasicMaterial({
  25.             map: earthTexture
  26.         })
  27.         centerBall2 = new THREE.Mesh(eartheGeometry, earthMaterial);
  28.         scene.add(centerBall2)
  29.         var generateSprite = function(color) {
  30.             var canvas = document.createElement('canvas');
  31.             canvas.width = 16;
  32.             canvas.height = 16;
  33.             var context = canvas.getContext('2d');
  34.             var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2)
  35.             gradient.addColorStop(0, 'rgba(' + color + ',1)');
  36.             gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
  37.             gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
  38.             gradient.addColorStop(1, 'rgba(0,0,0,0)');
  39.             context.fillSTylel = gradient;
  40.             context.fillRect(0, 0, canvas.width, canvas.height);
  41.             return canvas;
  42.         }
  43.         var sunSpriteColor = '15,120,155'
  44.         var SpriteMaterial = new THREE.SpriteMaterial({
  45.             map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
  46.             blending: THREE.AdditiveBlending
  47.         })
  48.         var centerBallLite = new THREE.Sprite(SpriteMaterial);
  49.         centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = 250;
  50.         scene.add(centerBallLite);
  51.         var spotLight = new THREE.SpotLight(0xffffff);
  52.         spotLight.position.set(-40, 60, -10);
  53.         scene.add(spotLight)
  54.         centerBall.position.y = 60
  55.         centerBall2.position.x = 160
  57.         centerBall.position.x = 160
  58.         centerBall2.position.y = -60
  59.         var step2 = 0;
  61.         function animate() {
  62.             requestAnimationFrame(animate);
  63.             // centerBall.rotation.x += 0.01;
  64.             centerBall.rotation.y += 0.04;
  65.             centerBall2.rotation.y += 200;
  66.             step2 += 0.1;
  67.             centerBall2.position.x = 22 + (10 * Math.cos(step2));
  68.             centerBall2.position.z = 2 + (10 * Math.abs(Math.sin(step2)));
  69.             renderer.render(scene, camera);
  70.             renderer.shadowMap.enabled = true;
  71.         }
  72.         animate();
  73.         
复制代码
来源：SketchUpBBS
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

扫一扫

入门
打赏

使用道具 举报

相关推荐
 第一章 Navisworks入门——1.2快速入门
 第一章 Navisworks入门——1.1Navisworks 2012安装
 threejs入门
 V-Ray for SketchUp新手必看入门教程（上）
 【Sketchup教程】草图大师从入门到精通 Sketchup建模教程
 2020草图大师零基础入门到精通教程 SketchUp建模教程（完整版）
 【Sketchup建模 系列】入门版~海螺壳图书馆！
 V-Ray Next for SketchUp – 入门简介（补档中文字幕版）
 【中英双字】V-Ray Next for SketchUp快速入门教程03-2：如何设定室内夜景照明
 3-01：绘图工具技巧-sketchup2022/2023基础入门到精通完全自学教程（集赞50个以上，再更新下一集了）

8 回复

gvhf0l2e7s
2022-10-9 06:48:20
打赏

举报

谢谢楼主提供的资讯！
bjkxydjnwx
2022-10-9 06:50:35
打赏

举报

LZ真是人才
pzuxmftnvw
2022-10-9 07:10:38
打赏

举报

前排支持下，谢谢分享
dduadzddzr
2022-10-9 07:17:02
打赏

举报

写的真的很不错
苏静婉
2022-10-9 07:30:43
打赏

举报

谢谢楼主提供的资讯！
zt45718073
2022-10-9 07:52:06
打赏

举报

谢谢楼主，共同发展
wklcmwycin
2022-10-9 08:04:43
打赏

举报

感谢分享！
010lp6fgn6
2022-10-9 09:32:40
打赏

举报

正好用到，谢谢！
B Color Image Link Quote Code Smilies
高级模式
游客
返回
塞上雪狼
积分
110 		主题
78 		精华
0
作者最近主题
© 2007-2022 DigitalDawn 沪ICP备17015288号-11繁体中文
返回顶部