01-Threejs初体验

最新推荐文章于 2024-01-03 15:17:56 发布

李析鸢

最新推荐文章于 2024-01-03 15:17:56 发布

阅读量468

点赞数 8

分类专栏： Thressjs开发文章标签： vue.js 前端

本文链接：https://blog.csdn.net/jiuliangliang/article/details/135357771

版权

Thressjs开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Threejs初体验

一、代码解析
三、效果

一、代码解析

1、先创建一个html文件，里面script标签加type=‘module’,然后引入three.js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module">
			import * as THREE from 'https://unpkg.com/three/build/three.module.js';

			// 后续的代码写在这里
		</script>
	</body>
</html>

2、创建一个场景，为了让场景借助three.js进行显示，还需要一下几个对象：场景、相机和渲染器，这样能透过摄像机渲染出场景

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

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

一、new THREE.Scene();是创建一个场景
二、new THREE.PerspectiveCamera（a,b,c,d）是相机（透视摄像机），有四个参数：
  1、视野角度（FOV）-视野角度是无论在什么时候，在显示器上所能看到的场景    的范围，单位是角度（与弧度区分开）
  2、长宽比（aspect ratio）-用一个物体的宽除以它的高所得来的值
  3、近截面（near）-当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中
  4、远截面（far）-当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中
三、new THREE.WebGLRenderer() --渲染器
四、除了创建一个渲染器实例之外，
  1、还需要设置一个渲染器的尺寸-renderer.setSize（）
  2、因此，我们可以将渲染器宽高设置为浏览器窗口宽高。
  3、可以使用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。
五、document.body.appendChild( renderer.domElement );
  1、我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素

3、添加立方体

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

一、new THREE.BoxGeometry（）-立方体对象
  1、这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）
  2、这个有6个参数，3个是必填参数，3个是可选参数
    ①width — X轴上面的宽度，默认值为1。
    ②height — Y轴上面的高度，默认值为1
    ③depth — Z轴上面的深度，默认值为1。
    ④widthSegments — （可选）宽度的分段数，默认值是1。
    ⑤heightSegments — （可选）高度的分段数，默认值是1。
    ⑥depthSegments — （可选）深度的分段数，默认值是1。
    
二、基础网格材质(new THREE.MeshBasicMaterial)
 1、一个以简单着色（平面或线框）方式来绘制几何体的材质。
 2、属性-
  属性较多，列几个常用的
    1、alphaMap-alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。
    2、color-材质的颜色(Color)，默认值为白色 (0xffffff)····
   其他具体属性请查看文档
   http://www.yanhuangxueyuan.com/threejs/docs/index.html?q=MeshBasicMaterial#api/zh/materials/MeshBasicMaterial
   
三、new THREE.Mesh（）-表示基于以三角形为polygon mesh（多边形网格）的物体的类。 同时也作为其他类的基类
  1、构造气可选参数
      1、geometry —— （可选）BufferGeometry的实例，默认值是一个新的BufferGeometry。
      2、material —— （可选）一个Material，或是一个包含有Material的数组，默认是一个新的MeshBasicMaterial。
  具体使用方法请查看文档
  http://www.yanhuangxueyuan.com/threejs/docs/index.html?q=Mes#api/zh/objects/Mesh

四、scene.add( cube ); 
   当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起
五、camera.position.z = 5;
  为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

4、渲染场景

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

5、立方体动起来

将下列代码添加到animate()函数中renderer.render调用的上方：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。

6、总体代码

<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'https://unpkg.com/three/build/three.module.js';

      const scene = new THREE.Scene();
      // PerspectiveCamera 透视摄像机
      // PerspectiveCamera有四个参数
      // 1、视野角度（FOV）-不论在什么时候，你所能在显示器上看到的场景的范围，单位是角度（与弧度区分开）
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

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

      const geometry = new THREE.BoxGeometry(1, 1, 1, 10, 10, 10);
      const material = new THREE.MeshBasicMaterial({ color: 0xaaaaaa });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame(animate);

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

        renderer.render(scene, camera);
      }

      animate();
    </script>
  </body>
</html>

7、运行

1、运行时使用Live Server打开，否则会报跨域错误，
在这里插入图片描述
2、如果vscode中找不到这个，可以打开扩展商店，找到这个扩展，点击安装就可以，安装完以后在页面中右键就有open with Live Server了

三、效果

请添加图片描述

李析鸢

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
01-Threejs初体验

2、如果vscode中找不到这个，可以打开扩展商店，找到这个扩展，点击安装就可以，安装完以后在页面中右键就有open with Live Server了。1、运行时使用Live Server打开，否则会报跨域错误，
复制链接

扫一扫