ThreeJS学习笔记（6）- 让场景动起来

最新推荐文章于 2024-05-30 17:57:45 发布

hbliu_ren

最新推荐文章于 2024-05-30 17:57:45 发布

阅读量1.6k

点赞数 1

分类专栏： ThreeJS

本文链接：https://blog.csdn.net/hbliu_ren/article/details/78226415

版权

场景中的物体怎么才能运动起来。我们这里从《古兰经》讲起，这样，你永远不会忘记。

《古兰经》上有这样一个故事：一天穆罕穆德告诉人们说大山会向我们走来。于是人们就远望大山，看它怎么走过来，可是等了好长时间大山还是纹丝不动的在那里，人们就问穆罕穆德，大山也没向我们走来啊。默罕默德告诉人们：既然大山没向我们走来，那我们就向大山走去吧。于是人们来到了大山的山顶，人们征服了那座大山。

这个故事揭示了场景动起来的方法，第一种方法是让物体在坐标系里面移动，摄像机不动。第二种方法是让摄像机在坐标系里面移动，物体不动。这样场景就能够动起来了。摄像机可以理解我们自己的眼睛。

<1> 让摄像机在坐标系里面移动

<!DOCTYPE html>

<html>
<head>
	<title>
	</title>
	<style type="text/css">
		body{
			margin:0;
		}
		div#canvas-frame {
			border: none;
			cursor: pointer;
			width: 100%;
			height: 600px;
			background-color: #EEEEEE;
		}
	</style>
	<script src="js/three.js"></script>
	<script src="js/jquery.js"></script>
	<script>
		//定义场景并初始化
		var scene;
		function initScene(){
			scene = new THREE.Scene();
		}
		
		//定义相机并初始化
		var camera;
		function initCamera(){
			camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
			camera.position.set(0,100,500);
			camera.lookAt(new THREE.Vector3(0,0,0));
		}
		
		//定义渲染器并初始化
		var renderer;
		function initRenderer(){
			renderer= new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);
			$("#canvas-frame").append(renderer.domElement);
			renderer.setClearColor(0x39609b,1);
		}
		
		//定义灯光并初始化
		var light;
		function initLight(){
			light=new THREE.DirectionalLight(0xFF0000,1.0,0);
			lig

最低0.47元/天解锁文章

hbliu_ren

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ThreeJS学习笔记（6）- 让场景动起来

场景中的物体怎么才能运动起来。我们这里从《古兰经》讲起，这样，你永远不会忘记。《古兰经》上有这样一个故事：一天穆罕穆德告诉人们说大山会向我们走来。于是人们就远望大山，看它怎么走过来，可是等了好长时间大山还是纹丝不动的在那里，人们就问穆罕穆德，大山也没向我们走来啊。默罕默德告诉人们：既然大山没向我们走来，那我们就向大山走去吧。于是人们来到了大山的山顶，人们征服了那座大山。这个故事揭示
复制链接

扫一扫