准备工作

1.运用three.js进行3d开发,其实和页面编程一样,首先需要在html文件中引入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, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 100,300 );


第四步:用js代码创建渲染器(renderer),设置渲染页面大小,一般为相机确定的3d页面大小,最后一行是把渲染器加入页面.

        let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.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;//允许旋转


最终代码:

    <!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, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 50,300 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.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>

准备工作

1.运用three.js进行3d开发,其实和页面编程一样,首先需要在html文件中引入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, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 100,300 );


第四步:用js代码创建渲染器(renderer),设置渲染页面大小,一般为相机确定的3d页面大小,最后一行是把渲染器加入页面.

        let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.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;//允许旋转


最终代码:​

    <!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, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 50,300 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.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>