🌓
搜索
 找回密码
 立即注册

threejs入门

塞上雪狼 2022-10-9 07:28:13 49369
返回列表 发新帖
塞上雪狼
今年刚刚接触threejs。这玩意封装得挺不错。为了使大家感观上能够了解threejs.这里直接分享一段代码。看完就知道threejs的套路了。所有的学习资料，源代码，从github上已经足够。5000多的源码分享，天啊。。。
https://github.com/search?q=threejs
 
有几个例子也比较好的：https://github.com/luosijie/threejs-examples 
以下一个案例，配置运行起来可以直接了解到threejs的结构。threejs的JS引用文件自己去官方找。https://threejs.org/
效果示意图：
225141ldafdhcr1rfu814f.png 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <title>three.js webgl - Simple text from json</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8.     
  9. </head>
  11. <body>
  12.     
  13.         <script></script>
  15.         <script></script>
  17.         <script></script>
  19.         <script></script>
  20.         <script></script>
  21.         <script></script>
  22.         <script></script>
  23.         <script></script>
  25.         <script>
  27.             var camera, scene, renderer;
  28.             var components = [];
  29.             var selComps = [];
  30.             var controls;
  31.             var mouseInfo;
  32.             var tube;
  33.             var ptone;
  34.             initComp();
  35.             animate();
  38.             
  39.             function initComp() {
  40.                 document.addEventListener('mousedown', onDocumentMouseDown, false);
  41.                 document.addEventListener('mousemove', onDocumentMouseMove, false);
  42.                 document.addEventListener('mouseup', onDocumentMouseUp, false);
  43.                 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
  44.                 camera.up.set(0, 1, 0);
  45.                 controls = new THREE.OrbitControls(camera);
  47.                 scene = new THREE.Scene();
  48.                 
  49.                 camera.position.set(100,100,100);
  50.                 
  51.                 scene.position = new THREE.Vector3(0,0,0);
  52.                 scene.up = new THREE.Vector3(0,0,1);
  55.                 dxplane();
  56.                 cube();
  57.                 sphere();
  58.                 cylinder();
  60.                 var axes = new THREE.AxisHelper(100);
  61.                 scene.add(axes);
  64.                 controls.update();
  67.                 var ambientLight = new THREE.AmbientLight(0x606060);
  68.                 scene.add(ambientLight);
  69.                 //平行光源
  70.                 var directionalLight = new THREE.DirectionalLight(0xffffff);
  71.                 directionalLight.position.set(1, 0.75, 0.5).normalize();
  72.                 scene.add(directionalLight);
  75.                 scene.background = new THREE.Color(0xffffff);
  76.                 renderer = new THREE.WebGLRenderer({ antialias: true });
  77.                 renderer.setPixelRatio(window.devicePixelRatio);
  78.                 renderer.setSize(window.innerWidth, window.innerHeight);
  79.                 document.body.appendChild(renderer.domElement);
  81.                 window.addEventListener('resize', onWindowResize, false);
  83.             } // end init
  84.             
  85.             function initLight() {
  86.                 scene.add(new THREE.AmbientLight(0x444444));
  88.                 light = new THREE.DirectionalLight(0xffffff);
  89.                 light.position.set(0, 0, 0);
  91.                 light.castShadow = true;
  92.                 light.shadow.camera.top = 10;
  93.                 light.shadow.camera.bottom = -10;
  94.                 light.shadow.camera.left = -10;
  95.                 light.shadow.camera.right = 10;
  97.                 //告诉平行光需要开启阴影投射
  98.                 light.castShadow = true;
  100.                 scene.add(light);
  101.             }
  103.             function onWindowResize() {
  105.                 camera.aspect = window.innerWidth / window.innerHeight;
  106.                 camera.updateProjectionMatrix();
  108.                 renderer.setSize(window.innerWidth, window.innerHeight);
  110.             }
  112.             function animate() {
  114.                 requestAnimationFrame(animate);
  116.                 render();
  118.             }
  120.             function render() {
  121.                 if (renderer)
  122.                     renderer.render(scene, camera);
  124.             }
  127.             function onDocumentMouseDown(event) {
  128.                 console.log(event);
  129.                 if (event.button != 0) return;
  130.                 mouseInfo = { start: [event.x, event.y] };
  133.             }
  134.             function onDocumentMouseUp(event) {
  135.                 if (event.button != 0) return;
  136.                 if (event.x - mouseInfo.start[0] != 0 || event.y - mouseInfo.start[1] != 0) return;
  137.                 var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
  138.                 vector = vector.unproject(camera);
  140.                 var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  142.                 var intersects = raycaster.intersectObjects(components);
  143.                 console.log(intersects)
  144.                 // console.log(intersects.length)
  145.                 if (selComps.length > 0) {
  146.                     selComps[0].object.material.transparent = false;
  147.                     selComps[0].object.material.opacity = 1;
  148.                     selComps = [];
  149.                 }
  150.                 if (intersects.length > 0) {
  151.                     // console.log(intersects[0]);
  152.                     intersects[0].object.material.transparent = true;
  153.                     intersects[0].object.material.opacity = 0.5;
  154.                     selComps.push(intersects[0]);
  155.                 }
  156.             }
  158.             function onDocumentMouseMove(event) {
  159.                 if (controls.showRay) {
  160.                     var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
  161.                     vector = vector.unproject(camera);
  163.                     var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  164.                     var intersects = raycaster.intersectObjects(components);
  166.                     if (intersects.length > 0) {
  168.                         var points = [];
  169.                         points.push(new THREE.Vector3(-30, 39.8, 30));
  170.                         points.push(intersects[0].point);
  172.                         var mat = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.6 });
  173.                         var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 60, 0.001);
  175.                         if (tube) scene.remove(tube);
  177.                         if (controls.showRay) {
  178.                             tube = new THREE.Mesh(tubeGeometry, mat);
  179.                             scene.add(tube);
  180.                         }
  181.                     }
  182.                 }
  183.             }
  184.             //创建一个平面
  185.             function dxplane() {
  186.                 var planeGeo = new THREE.PlaneGeometry(100, 100, 10, 10);//创建平面
  187.                 var planeMat = new THREE.MeshLambertMaterial({  //创建材料
  188.                     color: 0x666666,
  189.                     wireframe: false
  190.                 });
  191.                 var planeMesh = new THREE.Mesh(planeGeo, planeMat);//创建网格模型
  192.                 planeMesh.position.set(0, 0, -20);//设置平面的坐标
  193.                 planeMesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度
  194.                 scene.add(planeMesh);//将平面添加到场景中
  195.             }
  196.             //创建一个立方体
  197.             function cube() {
  198.                 var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);//创建立方体
  199.                 var cubeMat = new THREE.MeshLambertMaterial({//创建材料
  200.                     color: 0x003300,
  201.                     wireframe: false
  202.                 });
  203.                 var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
  204.                 cubeMesh.position.set(20, 10, 0);//设置立方体的坐标
  205.                 scene.add(cubeMesh);//将立方体添加到场景中
  206.             }
  207.             //创建一个球
  208.             function sphere() {
  209.                 var sphereGeo = new THREE.SphereGeometry(16, 40, 40);//创建球体
  210.                 var sphereMat = new THREE.MeshLambertMaterial({//创建材料
  211.                     color: 0x0000FF,
  212.                     wireframe: false
  213.                 });
  214.                 var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型
  215.                 sphereMesh.position.set(-25, 10, 0);//设置球的坐标
  216.                 scene.add(sphereMesh);//将球体添加到场景
  217.             }
  218.             //创建圆柱体
  219.             function cylinder() {
  220.                 //创建圆柱体
  221.                 var cylinderGeo = new THREE.CylinderGeometry(15, 15, 40, 40, 40);
  222.                 var cylinderMat = new THREE.MeshLambertMaterial({//创建材料
  223.                     color: 0xFF6600,
  224.                     wireframe: false
  225.                 });
  226.                 //创建圆柱体网格模型
  227.                 var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);
  228.                 cylinderMesh.position.set(0, 20, -40);//设置圆柱坐标
  229.                 cylinderMesh.up.set(0, 0, 1);
  230.                 scene.add(cylinderMesh);//向场景添加圆柱体
  231.             }
  234.         </script>
  236. </body>
复制代码


来源：SketchUpBBS
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

扫一扫

入门
打赏

使用道具 举报

相关推荐
 第一章 Navisworks入门——1.2快速入门
 第一章 Navisworks入门——1.1Navisworks 2012安装
 Three.js入门学习
 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 回复

宋裕
2022-10-8 22:52:36
打赏

举报

真是 收益 匪浅
yhzhhbxsvf
2022-10-9 05:49:55
打赏

举报

锄禾日当午，发帖真辛苦。
4foudal4wg
2022-10-9 05:52:05
打赏

举报

好好 学习了 确实不错
no5s69k5z1
2022-10-9 06:03:01
打赏

举报

谁知坛中餐，帖帖皆辛苦！
h4q14hpkbv
2022-10-9 07:06:31
打赏

举报

LZ真是人才
忾暨
2022-10-9 07:14:46
打赏

举报

我是来刷分的，嘿嘿
ibcwkpgbcl
2022-10-9 07:25:32
打赏

举报

拓展了视野！
nmhbtumuqy
2022-10-9 07:28:13
打赏

举报

路过，支持一下啦
B Color Image Link Quote Code Smilies
高级模式
游客
返回
塞上雪狼
积分
110 		主题
78 		精华
0
作者最近主题
© 2007-2022 DigitalDawn 沪ICP备17015288号-11繁体中文
返回顶部