准备工作
1. 运用 three.JS 进行 3d 开发, 其实和页面编程一样, 首先需要在 html 文件中引入 https://cdn.bootCSS.com/three.js/ .Three.JS 使用面向对象的方式来构建程序, 它包含 3 个基本对象: 场景 (scene), 相机 (camera), 以及一个渲染器 (renderer).
第一步: 引入 three.JS.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset=utf-8>
- <title>
- My first Three.JS App
- </title>
- </head>
- <body>
- <script src="https://cdn.bootcss.com/three.js/r83/three.min.js">
- </script>
- <script>
- // 这个位置是留给后面初始化和开发 3d 页面的 JS 代码
- </script>
- </body>
- </HTML>
第二步: 用 JS 代码创建 3D 场景 (scene), 非常简单就一行代码.
let scene = new THREE.Scene();
第三步: 用 JS 代码创建相机 (camera), 再确定其位置, 下面代码也就两行, 但是多了参数. 来说明一下参数的作用:
- //fov 代表视角 我们观察位置的视觉
- //aspect 宽高比 简单理解为确定 3d 页面的宽和高
- //near 最近看到 滚轮缩放的最小距离
- //far 最远看到 滚轮缩放的最大距离
- let camera = PerspectiveCamera( fov, aspect, near, far );
- camera.position.set( x, y,z);//x: 水平方向位置, y: 竖直方向位置, z: 垂直屏幕方向位置
一般给下面这组值来确定相机能够看得的位置:
- let camera = new THREE.PerspectiveCamera( 75, Windows.innerWidth / Windows.innerHeight, 0.1, 1000 );
- camera.position.set( 0, 100,300 );
第四步: 用 JS 代码创建渲染器 (renderer), 设置渲染页面大小, 一般为相机确定的 3d 页面大小, 最后一行是把渲染器加入页面.
- let renderer = new THREE.webGLRenderer();
- renderer.setSize( Windows.innerWidth, Windows.innerHeight );
- document.body.appendChild(renderer.domElement );
第五步: 给 3d 页面添加一个白色环境光这样我们才能够看见物体:
- // 环境光
- let ambientLight = new THREE.AmbientLight( 0xf5f5f5);// 创建光
- scene.add( ambientLight );// 加入到场景
最后一步: 开始时刻渲染 3d 页面, 虽然完成了最后一步, 但是运行代码后我们还是不能看见任何东西, 那是因为我们只渲染了 3d 页面, 并没有添加事物到页面, 接下来我们就来添加一个球吧:
- function render() {
- requestAnimationFrame( render );
- renderer.render( scene, camera );
- }
- render();
添加个球吧, 添加了下面代码再运行下发现 3d 页面上有一个红色的球了, 但是我们不能用鼠标来控制它, 那是因为 three.JS 里面没有来写鼠标的控制 3d 页面, 我们还需要引入鼠标控制插件 OrbitControls.JS.
- let ball= new THREE.SphereGeometry( 5, 32, 32 );// 创建球
- let ballColor= new THREE.MeshBasicMaterial( {color: 0xffff00} );// 创建材质色, 用来给球上色的
- let sphere = new THREE.Mesh( ball, ballColor);// 给球上色
- scene.add( sphere );// 把球加入到场景
再添加格子辅助线方便我们观察和调整物体位置:
- let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );// 创建辅助线
- scene.add( grid );// 加入场景
引入 OrbitControls.JS, 然后初始化控件, 在运行页面发现可以用鼠标来控制这个球了, 就问你完不完美, beautiful 不 beautiful;
- <script src="/libs/OrbitControls.js"></script>
- let controls =newTHREE.OrbitControls(camera);
- // 通过. enableZoom 属性可以控制是否允许鼠标中键缩放场景,.enableZoom 属性默认值 true.
- controls.enableZoom =true;// 允许缩放 `
- controls.minDistance = 1;// 能够缩放多小
- controls.maxDistance = 2000;//// 能够放大多大
- // 通过. enableRotate 属性可以控制是否允许鼠标左键旋转场景,.enableRotate 属性默认值 true.
- controls.enableRotate =true;// 允许旋转
最终代码: 运行一下, 查看效果 https://lookuptothesky.coding.me/blok_demo1
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset=utf-8>
- <title>
- demo1
- </title>
- </head>
- <body>
- <script src="lib/three.min.js">
- </script>
- <script src="lib/OrbitControls.js">
- </script>
- <script>
- // 这个位置是留给后面初始化和开发 3d 页面的 JS 代码
- let scene = new THREE.Scene();
- let camera = new THREE.PerspectiveCamera(70, Windows.innerWidth / Windows.innerHeight, 0.1, 2000);
- camera.position.set(0, 50, 300);
- let renderer = new THREE.WebGLRenderer();
- renderer.setSize(Windows.innerWidth, Windows.innerHeight);
- document.body.appendChild(renderer.domElement);
- // 给场景添加一个环境光
- let ambientLight = new THREE.AmbientLight(0xf5f5f5);
- scene.add(ambientLight);
- let grid = new THREE.GridHelper(400, 30, 0xcccccc, 0xcccccc);
- scene.add(grid);
- let ball = new THREE.SphereGeometry(5, 32, 32); //5: 球半径 第一个 32: 水平分割面的数量. 第二个 32: 垂直分割面的数量.
- let ballColor = new THREE.MeshBasicMaterial({
- color: 0xff0000
- });
- let cube = new THREE.Mesh(ball, ballColor);
- scene.add(cube);
- let controls = new THREE.OrbitControls(camera, renderer.domElement);
- controls.enableZoom = true; // 允许缩放
- // 设置相机移动距离
- controls.minDistance = 1;
- controls.maxDistance = 2000;
- controls.enableRotate = true;
- function render() {
- requestAnimationFrame(render);
- renderer.render(scene, camera);
- }
- render();
- </script>
- </body>
- </HTML>
three.JS 的中文文档踏得网 https://techbrood.com/threejs/docs/
来源: https://www.cnblogs.com/lmf-sky/p/12187733.html