当前位置：首页 > Web开发 > 正文

THREE.CubeGeometry #p#分页标题#e# var geometry = new THREE.CubeG

2024-03-31 Web开发

WebGL是在浏览器中实现三维效果的一套规范。

WebGL能做什么

游戏、家居、虚拟现实、都市舆图、CAD制图等等

什么是Three.js

three.js就是使用javascript 来写的，，运行在浏览器上的3D措施。three.js是一个封装好的WebGL库，相当于简化了WebGL的操纵。

three.js下载地点

第一个例子

<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="js/three.min.js"></script> </body> </html>

在浏览器运行，Console下输入 THREE.REVISION命令，得到版本号

技术图片

第一个框架

<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="js/three.min.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(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render(); </script> </body> </html>

技术图片

四大组件

场景（scene）、相机（camera）和衬着器（renderer）、几何体。

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);

1、场景

场景是所有物体的容器，如果要显示一个苹果，就需要将苹果东西插手场景中。

var scene = new THREE.Scene();

2、相机

相机决定了场景中阿谁角度的景色会显示出来。相机就像人的眼睛一样，人站在差别位置，昂首或者垂头都能够看到差此外景色。

透视相机（THREE.PerspectiveCamera）：离视点近的物体大，离视点远的物体小。

正投影相机：远近都一样巨细。

3、衬着器

衬着器决定了衬着的功效应该画在页面的什么元素上面，并且以怎样的方法来绘制。

4、几何体

几何体就是要显示在场景中的东西。THREE.CubeGeometry

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30839.html

THREE.CubeGeometry #p#分页标题#e# var geometry = new THREE.CubeG

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢