three.js学习笔记（1）

最新推荐文章于 2023-02-06 08:36:59 发布

非&乐

最新推荐文章于 2023-02-06 08:36:59 发布

阅读量162

点赞数

分类专栏：笔记文章标签： javascript js three.js

本文链接：https://blog.csdn.net/Feiyue131145/article/details/112728281

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

threejs需要放在html中，首先创建如下所示的html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>three.js</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			threejs放在这里
		</script>
	</body>
</html>

使用threejs需要有几个元素，场景，相机，渲染器，你需要xian显示的物体。

首先来创建一个场景

var scene = new THREE.Scene();

创建相机并设置场景的一些参数。

第一个参数是视野角度（FOV）

第二个参数是长宽比（aspect ratio）

接下来的两个参数是近截面（near）和远截面（far）

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

创建渲染器，设置渲染器的宽度和高度，将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中，给body元素插入canvas对象。

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

注意：如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false，如：renderer.setSize( window.innerWidth, window.innerHeight ,false);

接下来就是，创建我们需要显示的内容了，这里以创建一个立方体为显示目标

var geometry = new THREE.BoxGeometry();

给立方体添加材质，并设置材质的相关参数，如颜色

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

创建一个网格来承载立方体和他的材质，并将网格放在场景中，这样我们才可以看到物体，

var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

默认情况下，当调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起，这样摄像机就无法看到这个物体，所以需要把摄像机向外移动一些

camera.position.z = 5;

渲染场景，需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

到此，你就可以看到一个绿色的立方体了，这个立方体是不动的，可以在animate方法中jia'加上这些参数，使得立方体xuan旋转

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

完整的代码如下

<html>
<head>
    <title>threejs</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
<script src="js/three.js"></script>
<script>
    var  scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;

    var animate = function () {
        requestAnimationFrame( animate );

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render( scene, camera );
    };
    animate();
</script>
</body>
</html>

非&乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js学习笔记（1）

threejs需要放在html中，首先创建如下所示的html文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>three.js</title> <style> body { margin: 0; } </style> </head> <body> <script src="
复制链接

扫一扫

专栏目录