码迷,mamicode.com
首页 > Web开发 > 详细

WebGL之Threejs概述

时间:2020-01-31 12:07:59      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:概述   组件   视频   oob   ejs   script   好的   href   mes   

什么是WebGL

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

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

 

WebGL中文网

初级学习视频网址

 

WebGL之Threejs概述

标签:概述   组件   视频   oob   ejs   script   好的   href   mes   

原文地址:https://www.cnblogs.com/liangtao999/p/12244918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!