three.js入门 DEMO

面向Web3，春暖花开

于 2019-09-02 12:06:13 发布

阅读量2.6k

点赞数 1

分类专栏： JS 前端文章标签：动画连续动画 threejs

本文链接：https://blog.csdn.net/weixin_29491885/article/details/100226255

版权

前端同时被 3 个专栏收录

73 篇文章 1 订阅

订阅专栏

41 篇文章 0 订阅

订阅专栏

插件

10 篇文章 1 订阅

订阅专栏

入门 DEMO

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://threejs.org/build/three.js"></script>
</head>
<body>
<script>
	//建立了场景
	var scene = new THREE.Scene();
	/*
		摄像机 ( PerspectiveCamera（透视摄像机）或者 OrthographicCamera（正交摄像机）。)
	 	1.PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
			fov — 摄像机视锥体垂直视野角度
			aspect — 摄像机视锥体长宽比
			near — 摄像机视锥体近端面
			far — 摄像机视锥体远端面
		2.OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
			left — 摄像机视锥体左侧面。
			right — 摄像机视锥体右侧面。
			top — 摄像机视锥体上侧面。
			bottom — 摄像机视锥体下侧面。
			near — 摄像机视锥体近端面。
			far — 摄像机视锥体远端面。
	*/
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	// 渲染器
	var renderer = new THREE.WebGLRenderer({
		antialias:true //是否执行抗锯齿
	});
	renderer.setSize( window.innerWidth, window.innerHeight );
	// 添加到页面中
	document.body.appendChild( renderer.domElement );
	// BoxGeometry（立方体）对象
	var geometry = new THREE.BoxGeometry( 20, 20, 20 );
	// 素材
	var material = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
	// 网格
	var cube = new THREE.Mesh( geometry, material );
	//默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。
	scene.add( cube );

	//为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
	camera.position.z = 100;

	// light
	var light = new THREE.PointLight(0xffff00);
	light.position.set(10, 0, 25);
	scene.add(light);

	// “渲染”或者“动画循环”
	function animate() {
		requestAnimationFrame( animate );
		// 让它旋转起来
		cube.rotation.x += 0.03;
		cube.rotation.y += 0.03;

		renderer.render( scene, camera );
	}
	animate();

</script>
</body>
</html>

二十面体 DEMO

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://threejs.org/build/three.js"></script>
</head>
<body>
<script>
	//建立了场景
	var scene = new THREE.Scene();
	// 摄像机
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	// 渲染器
	var renderer = new THREE.WebGLRenderer({
		antialias:true //是否执行抗锯齿
	});
	renderer.setSize( window.innerWidth, window.innerHeight );
	// 添加到页面中
	document.body.appendChild( renderer.domElement );
	// 二十面体（立方体）对象
	var geometry = new THREE.IcosahedronGeometry(15, 0);
	// 素材
	var material = new THREE.MeshNormalMaterial();
	// 网格
	var icosahedron = new THREE.Mesh( geometry, material );
	//默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。
	scene.add( icosahedron );

	// rotate
	icosahedron.rotation.x = 0.1;
	icosahedron.rotation.y = -0.25;

	//为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
	camera.position.z = 100;

	// light
	var light = new THREE.PointLight(0xffff00);
	light.position.set(10, 0, 25);
	scene.add(light);

	// “渲染”或者“动画循环”
	function animate() {
		requestAnimationFrame( animate );
		// 让它旋转起来
		icosahedron.rotation.x += 0.03;
		icosahedron.rotation.y += 0.03;

		camera.updateProjectionMatrix();
		renderer.render( scene, camera );
	}
	animate();

</script>
</body>
</html>

我的个人博客,有空来坐坐

面向Web3，春暖花开

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js入门 DEMO

css与js结合完成动画效果入门 DEMO<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://threejs.org/build/three.j...
复制链接

扫一扫

专栏目录