three.js - 渲染并展示三维对象

看结果:

看源码及解释:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Scene</title>
    <style type="text/css">
        body {    /*移除所有的滚动条*/
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>

    <script type="text/javascript" src="./libs/three.js"></script>
    <script>
        var scene = new THREE.Scene();    // 场景容器, 用来保存并跟踪所有我们想渲染的物体

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);    // 相机变量, 我们能够在渲染好的场景scence里看到什么

        var renderer = new THREE.WebGLRenderer();    // 渲染器对象, 负责计算指定相机角度下浏览器中scene的样子
        renderer.setClearColorHex(0xEEEEEE);    // 将renderer对象的背景色设置为0xEEEEEE
        renderer.setSize(window.innerWidth, window.innerHeight);    // 让renderer对象将scene渲染成多大尺寸

        var axes = new THREE.AxisHelper(20);    // axes坐标轴对象
        scene.add(axes);    // 把坐标轴添加到场景中去

        var planceGeometry = new THREE.PlaneGeometry(60, 20);    // PlaneGeometry: 翻译 平面几何    (参数: 宽60, 高20)
        var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });    // MeshBasicMaterial: 翻译 基础网格材质    (用来设置平面的外观, 颜色,透明度等)
        var plane = new THREE.Mesh(planceGeometry, planeMaterial);    // 把这2个对象合并到一个名为plane(平面)的Mesh(网格)对象中
        plane.rotation.x = -0.5*Math.PI;    // 绕x轴旋转90度
        plane.position.x = 15;    // 平面坐标位置
        plane.position.y = 0;
        plane.position.z = 0;
        scene.add(plane);    // 将平面添加到场景

        var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);    // Geometry: 翻译 立方体几何
        var cubeMaterial = new THREE.MeshBasicMaterial({ color: ‘#12B7F5‘, wireframe: true });    // 立方体是0xff0000颜色    wireframe: 线框属性设置为true
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);    // 把立方体和他的外观合并一下
        cube.position.x = -3;    // 立方体的坐标位置
        cube.position.y = 3;
        cube.position.z = 0;
        scene.add(cube);    // 将立方体添加进去场景中去

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);    // 球体
        var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });    // 球体的外观
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);    // 把球体和外观合并一下
        sphere.position.x = 20;    // 球体的位置
        sphere.position.y = 4;
        sphere.position.z = 2;
        scene.add(sphere);    // 把球体添加进场景去

        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);    // lookAt函数指向场景的中心

        document.querySelector(‘#WebGL-output‘).appendChild(renderer.domElement);    // 把canvas添加到指定的dom中
        renderer.render(scene, camera);    // 使用渲染器渲染

    </script>
</body>
</html>

demo查看:

http://wx.indoorun.com/indoorun/wxtest/three/first-scene.html

时间: 2024-11-03 22:53:05

three.js - 渲染并展示三维对象的相关文章

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

Node.js静态页面展示例子2

例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar 页面效果: Html页面代码(注意用文本编辑器如Editplus3保存文件时要指定编码为UTF-8,否则容易出现乱码): <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="

JS中的内置对象简介与简单的属性方法

JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一数组可以储存多种不同的数据类型(但,同一数组一般只用于存放同种数据类型) 例如var arr1 = [1,"2",true,{"name":"啦啦啦"},[1,2]]; ②通过new关键字声明:var arr2 = new Array(参数); &g

用js 对拥有多个对象的数组进行排序

我们想要根据某个对象属性对数组进行排序.而传递给数组sort()方法的比较函数要接收两个参数,即要比较的值.可是,我们需要一种方式来指明按照哪个属性来排序.要解决这个问题,可以定义一个函数,它接收一个属性名,然后根据这个属性名来创建一个比较函数,下面就是这个函数的定义. 1 function createComparisonFunction(propertyName) { 2 return function (object1, object2) { 3 var value1 = object1[

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大多是一些纯html和js,很少用到jstl的一堆东西,后端也仅仅处理一些前端的post.get请求或页面跳转,无须以往繁琐的xml路径映射和filter过滤. 不过有时也会用到servlet作用域中的一些东西,比如某个固定的值.上下文路径等等~,不过这些东西大多数也仅限于取值而不是设置值(或对象),

插入三维对象

原文 插入三维对象 Expression Studio 4.0 其他版本 Microsoft Expression Blend 提供了很多用于创建.修改和动态显示三维对象的实用工具. Expression Blend 可以导入 .obj 文件格式的三维内容.为了让这些文件能够正确呈现,还必须导入材料文件(.mtl 文件),该文件定义了三维对象上使用的材料,并导入材料文件中使用的所有图像文件. 三维内容包含在“Viewport3D”控件中.该视区用作三维内容的一种包装或容器.您可以在“属性”面板中

JS搞基指南----延迟对象入门提高资料整理

原文:JS搞基指南----延迟对象入门提高资料整理 JavaScript的Deferred是比较高大上的东西,  主要的应用还是主ajax的应用,  因为JS和nodeJS这几年的普及,  前端的代码越来越多,  各种回调套回调再套回调实在太让人崩溃, 所以就从后端拖了一个延迟对象这货, 用来解决回调地狱这个问题 .  我们使用ajax的时候多数都是为ajax添加回调 ,然后异步向服务器发送请求, 比如如下原生的XHR代码: <!DOCTYPE html PUBLIC "-//W3C//D

手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 实战尚妆网AJAX请求处理和内容提取 老规矩,爬之前首先感谢淘宝公布出这么多有价值的数据,才让我们这些爬虫们有东西可以搜集啊,不过淘宝就不用我来安利了 广大剁手党相信睡觉的时候都能把网址打出来吧. 工欲善其事,必先利其器,先上工具: 1.神箭手云爬虫,2.Chrome浏览器 3.Chrome的插件XpathHelper 不知道是干嘛的同学请移步第一课

JS和JQ的event对象对比和应用

摘要 js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用 js jquery jq event 代码测试: ? 1 2 3 4 5 6 7 <div id= "test" ><p>test text<p></div> <script src= "vendor/jquery-2.1.1.js" ></script> <script> test.ad