let's go three.js学习一：创建场景

本文链接：https://blog.csdn.net/weixin_43360634/article/details/103386609

第一节：创建场景

笔记整理一下子，共同进步。

1.原生的可以这样写：

<html>
	<head>
		<title>第一节</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</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);
			//将渲染器渲染出的场景添加到body中
			document.body.appendChild(renderer.domElement);
			
			//创建一个盒子
			var geometry = new THREE.BoxGeometry(1,1,1);//盒子的长宽高都是1
			var material = new THREE.MeshBasicMaterial({color:0x00ff00});//盒子颜色，为十六进制0x
			//网格采用几何形状并对其应用材质的对象，然后我们可以将其插入场景并自由移动。
			var cube = new THREE.Mesh(geometry,material);//网格
			scene.add(cube)//插入到场景中，添加的内容到（0，0，0）原点坐标
			camera.position.z = 5;//为避免这种情况，我们只需要稍微移开相机即可。
			 
			 //渲染场景
			//上面代码运行看不到任何画面，因为还没渲染任何东西
			function animate(){
				//创建一个循环，使刷新器在每次刷新屏幕时绘制场景
				//requestAnimationFrame比setinterval好，因为用户切换另一个选项卡时，他会自动暂停，不浪费处理能力。
				requestAnimationFrame(animate);
				//到这一步你会看到绿色的盒子，但是没有任何效果，接下来我们让他everybody动起来。
				//这将每帧运行一次（通常每秒运行60次）
				cube.rotation.x += 0.01;//后面数字越大，速度越快
				cube.rotation.y += 0.01;
				renderer.render(scene,camera);
			}
			animate();
		</script>
	</body>
</html>

2.vue可以这样写

首先得搭建vue项目，不会搭建vue项目的，点这里

其次导入three模块：npm install three

导入完成再其次就是上代码：

<template>

</template>

<script>
  import * as THREE from "three"
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    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( 1, 1, 1 );
    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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

小编也在学习中，如有错误，欢迎大神留言指正，文章也在更新中…