Three.js初探

  WebGL是在浏览器中实现三维效果的一套规范,而Three.js是一个WebGL的开源框架,它掩盖了WebGL很多麻烦的细节。

一、环境配置

  引入 three.js文件就可以了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</body>
</html>

二、代码结构

  在Three.js中,要渲染物体到网页,我们需要三个组件:场景(scene)、相机(camera)、和渲染器(renderer)。有了这三个东西,我们才能使用相机将场景渲染到网页上去。

1.代码

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

2.理解

猜你喜欢

转载自www.cnblogs.com/shenjie0507/p/9071837.html