三维场景基本要素和demo-01

来源：互联网发布：新加坡mac dns设置编辑：程序博客网时间：2024/05/10 19:02

前言

下载three.js:three.js官网

扩展库：three.js-master\three.js-master\examples\js

核心库：three.js-master\three.js-master\build

1.基本要素

场景（Scene）：模型、灯光等

相机(Camera)：观察场景的视角

渲染器(Renderer)：场景渲染输出的目标

渲染(render):执行渲染操作

2.demo

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>threejs--demo001</title>    <script src="../js/three.js"></script></head><body>    <script>        //第一步创建场景元素        var scene=new THREE.Scene();        //第二步创建一个网格模型对象  网格对象方法function Mesh( geometry, material )        //需要两个参数geometry几何模型  material材质        var geometry=new THREE.BoxGeometry(100,100,100);//立方体模型        var material=new THREE.MeshLambertMaterial({color:0xff0000});        var mesh=new THREE.Mesh(geometry,material);        scene.add(mesh);//添加网格到场景中        //添加灯光  点光源        var light=new THREE.PointLight(0xff0000);        light.position.set(300,400,200);//光源的位置        scene.add(light);//将光源加入到场景中        //添加相机  透视相机        var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);        camera.position.set(200,200,200);//相机的位置        camera.lookAt(scene.position);//相机朝向的位置        //添加渲染器        var renderer=new THREE.WebGLRenderer();        renderer.setSize(800,600);        //将渲染器加到文档中        document.body.appendChild(renderer.domElement);        //渲染  渲染需要传入两个参数 一个是场景对象 一个是相机        renderer.render(scene,camera);    </script></body></html>

效果

阅读全文

0 0