官网文档 three.js docs
首先要创建 场景scene 相机camera 渲染器render 一定要先根据官网引入three.js的js文件
const scene = new THREE.Scene(); //创建场景
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();//创建渲染器对象
renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染区尺寸
document.body.appendChild( renderer.domElement );//body中插入canvas对象
/*
three.js有几种不同的相机
* 1.js有几种相机,分别是什么? [ a.四种相机: PerspectiveCamera ( 透视 相机) 、OrthographicCamera ( 正交投影 相机)、CubeCamera ( 立方体 相机 或全景 相机)和StereoCamera (3D相机)]
*
* 2.相机的参数分别是什么? [
* a.透视相机: PerspectiveCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面
* b.正交投影相机: OrthographicCamera( left, right, top, bottom, near, far ) left: 视锥体左边界, right: 视锥体右边界, top: 视锥体上边界, bottom: 视锥体下边界, near: 近裁面, far: 远裁面
* c.立方体相机: CubeCamera( near, far, cubeResolution ) near: 近裁面, far: 远裁面, cubeResolution: 立方体纹理分辨率
* d.3D相机: StereoCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面
* ]
*
* 3.相机的位置是怎么设置的? [
* a.相机的位置通过相机的position属性来设置的 相机.position.set(x,y,z);
* ]
* 4.相机的方向是怎么设置的?[
* a.相机的方向通过相机的lookAt方法来设置的 相机.lookAt(0,0,0);
* b.相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍) 就像是由屏幕外向屏幕内看一样 (模拟人眼的视觉效果)
* ]
* 5.相机的视野是怎么设置的?[
* a.相机以哪个视野为上方通过up方法来设置的
* b.相机.up.set(x,y,z); 默认是y轴向上 就是你拿着相机是躺着拍,趴着拍还是侧着拍的区别,或是抬头看,低头看,扭头看的区别。
* ]
*/
根据官网例子
添加立方体
const geometry = new THREE.BoxGeometry(); //立方体图形
//材质对象material 这里表示给材质对象添加颜色,颜色仅支持十六进制的0x色彩
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );//网格模型对象添加到场景中
camera.position.z = 5;//相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理
渲染场景
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
添加动画函数,使物体转动
将下列代码添加到animate()函数中renderer.render调用的上方:
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
全部代码如下
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript">
// 场景
var scene = new THREE.Scene();
// 摄像机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 渲染器 end
// 物体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 动画
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
animate();
// 物体 end
// 光源
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );
// 光源 end
// 物体
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 );
// 物体 end
renderer.setClearColor(new THREE.Color(0x000000, 1.0));
renderer.shadowMap.enabled = true;
cube.castShadow = true; //投射阴影
plane.receiveShadow = true; //地面接收阴影
spotLight.castShadow = true;
</script>
</body>
</html>
效果如下 上下左右旋转的一个正方体
个人练习代码
一定要引入three.js文件否则会白屏不会显示渲染
这里我使用的是远程仓库的three.main.js外联 vue项目可根据官网自行下载包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffff; /* 背景色只能是hash模式 */
margin: 0;
overflow: hidden; /* 隐藏body窗口区域滚动条 */
}
</style>
</head>
<body>
<!-- 起步
创建three.js文件在官网找到three.js代码粘贴进去 并导入到html文件中(必须引入three.js)
2.导入在线cdn的three.main.js链接
-->
<script type="text/javascript" src="../js/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
// 此处声明了相机 场景
function init() {
scene = new THREE.Scene(); //创建场景对象
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 12 );
camera.position.z = 3; //相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理
scene.background = new THREE.Color( 0xffffff );
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
geometry = new THREE.SphereGeometry( 1,12,12 );
//材质对象Material,这里只是单单的给赋值颜色采用的是 十六进制的0x色彩
material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );//网格模型对象
scene.add( mesh ); //网格模型对象添加到场景中
renderer = new THREE.WebGLRenderer( { antialias: true } ); //创建渲染器对象
renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染区尺寸
document.body.appendChild( renderer.domElement ); //body中插入canvas对象
}
//定义动画
function animate( time ) {
mesh.rotation.x = time * 0.0005;
mesh.rotation.y = time * 0.001;
renderer.render( scene, camera );//执行渲染操作 指定场景,相机作为参数
requestAnimationFrame( animate );
}
// 此demo声明函数仅仅是为了便捷
init();
requestAnimationFrame( animate );
</script>
</body>
</html>
效果图如下 一个旋转的球体
刚接触three,仅是个人初步了解.