学习

目标绘制点、线、面绘制复杂图形 threejs学习三杠一：点线面 3D世界在计算机的世界里，3D世界是由点组成，两点成一线，三个不在一条直线上的点就能组成一个三角形面，无数个三角形面就能组成各种形状的物体。（计算机图形的理论知识）通常把这种网络模型叫做 Mesh 模型。给物体贴上皮肤（纹理），那么这个物体就实际展现出来了。然后无数个这样的物体就组成了 3D 世界。 Threejs绘制一个点 1、定义在三维空间中的某一个点可以用一个坐标点来表示。一个坐标 …

学习

threejs学习二：征途

波澜之泉

3D , javascript , Threejs

1,609 次访问

2019

03-18

目标介绍 WebGL 基础介绍 WebGL 中的骑兵 Three.js 编写 Three.js 的简单实例简单实例模板

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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>

实例的效果是显示旋转一个绿色正方体，如下，但不同版本的 three.js 可能默认的背景颜色不一样：代码解析 1、三大组建在 Three.js 中，要渲染一个物体到网页中，需要三个组建：场景（scene）、相机（camera）、渲染器（renderer）。有这三样东西，才能将物体渲染到 …

threejs 学习一：入门

波澜之泉

3D , javascript , Threejs

2,660 次访问

2019-03-18

2019

03-18

简介 threejs 是基于 WebGL 开发一种集成、封装的 JS API，可以理解为 three + js，即 3D + javascript 的组合，实现在浏览器上打开网页渲染 3D 效果。 JavaScript 是运行在网页端的脚本语言（前端），毫无疑问 threejs 是运行在浏览器上的。由于近年 javascript 的计算能力因为 google 的 V8 引擎的到了大幅增强，不仅可以实现高计算量 3D 的快速渲染，甚至实现一部分服务器功能都没有问题。例如 nodejs。、关于浏 …