Threejs-创建旋转正方体

 RorinL     2021年04月12日 星期一 17:29:19     未分类      threejs    

1.首先创建空间

const scence = new THREE.Scence();

2.创建透视投影摄像机

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

参数:

75:指的是视野大小,数值越大视野越大,相反数值越小视野越小(物体也显得大)

window.innerWidth/window.innerHeight:告诉浏览器要显示的宽高比例

0.1:近平面, 简单理解就是当一个图像距离相机的距离小于1的时候, 就不显示这个图像了

1000:远平面, 简单理解就是当一个图像距离相机的距离大于1000的时候, 就不显示这个图像了

3.创建渲染器

const renderer = new THREE.WebGLRenderer();
//渲染区域的大小
    renderer.setSize(window.innerWidth, window.innerHeight);
//将渲染实例(一个canvars)添加到dom中
    document.body.appendChild(renderer.domElement);

4.添加一个立方体到场景

    //创建立方体
    const geometry = new THREE.BoxGeometry(1,1,1) //
        //立方体材质
    const material = new THREE.MeshBasicMaterial({color:0x00ff00,skinning:true});
        //添加网格
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube); //添加一个立方体到场景

BoxGeometry 长方体

const geometry = new THREE.BoxGeometry(1, 2, 3);

  1. 1: ‘长’, 也可以理解为在不设置坐标的时候在x轴上的长度。
  2. 2: ‘高’, 也可以理解为在不设置坐标的时候在y轴上的长度。
  3. 3: ‘宽’, 也可以理解为在不设置坐标的时候在z轴上的长度。

new出来的实例上面会有这个几何体的点的信息, 面的信息等等

MeshBasicMaterial材质

生成’网格’ Mesh

const cube = new THREE.Mesh(geometry, material);网格上含有位置信息、旋转信息、缩放信息… 需要用几何体材质两个参数,不传材质也能显示。

放入场景

场景对象scene有个add方法。scene.add(cube);

余下代码:

    //设置相机位置
    camera.position.z=5
    
    //设置动画
    let animate = function(){
        requestAnimationFrame(animate) // 告诉浏览器执行一个动画,并在继续下一个之前调用参数(这里调用自身)
        
        cube.rotation.x+=0.01 //不设置y时候呈现效果是向你的方向滚动(类似车轮)
        cube.rotation.y+=0.01
        renderer.render(scene,camera)
    }
    animate()

此处动画只是为了更直观,不设置动画,在处理好以上所有代码并设置相机位置后即可使用renderer.render(scene,camera)渲染出来(不会动)

忘了说一句,坐标轴z是面向你的,x轴在你右边,y轴是向上的

全部代码:

<html>
	<head>
		<meta charset="utf-8">
		<title>todoList清单</title>
		<!-- <link rel="stylesheet" href="index.css"> -->
        <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
        <style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
    <script>
    const scene = new THREE.Scene(); //创建空间
    //创建透视相机
    const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 1, 1000);
    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    //渲染区域的大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    //场景加入坐标轴,(坐标系长度)
    const axishelper = new THREE.AxesHelper(2)
    scene.add(axishelper)
    
    //添加立方体
    const geometry = new THREE.BoxGeometry(1,1,1)
        //立方体材质
    const material = new THREE.MeshBasicMaterial({color:0x00ff00,skinning:true});
        //添加网格
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    //设置相机位置
    camera.position.z=5
    
    //设置动画
    let animate = function(){
        requestAnimationFrame(animate) // 告诉浏览器执行一个动画,并在继续下一个之前调用参数(这里调用自身)
        
        cube.rotation.x+=0.01
        cube.rotation.y+=0.01
        renderer.render(scene,camera)
    }
    animate()
    
    //开始渲染
    
        </script>
	</body>
</html>


暂无评论

发表回复

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...