<!DOCTYPE html>

<html>

<head>

    <title>Example 01.02 - First Scene</title>

    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>

    <style>

        body{

            /* set margin to 0 and overflow to hidden, to go fullscreen */

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<!-- Div which will hold the Output -->

<div id="WebGL-output">

</div>

<!-- Javascript code that runs our Three.js examples -->

<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.

    $(function () {

        // create a scene, that will hold all our elements such as objects, cameras and lights.

        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex(0xEEEEEE);//渲染器背景颜色：白色

        renderer.setSize(window.innerWidth, window.innerHeight);//渲染场景的尺寸

        var axes = new THREE.AxisHelper( 20 );//创建一个axes（坐标轴）对象

        scene.add(axes);//用scene.add()函数将坐标轴添加到场景中

        // create the ground plane 创建场景

        var planeGeometry = new THREE.PlaneGeometry(60,20);//定义平面的尺寸，宽60，高20

        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//定义平面的外观 如颜色，透明度，这里我们创建了一个基本的材质MeshBasicMaterial()方法，还有颜色

        var plane = new THREE.Mesh(planeGeometry,planeMaterial);//把这两个对象合并到一个名为plane的网格中

        // rotate and position the plane  绕x轴旋转90度然后通过设置位置属性定义它在场景中的位置。

        plane.rotation.x=-0.5*Math.PI;

        plane.position.x=15

        plane.position.y=0

        plane.position.z=0

        // add the plane to the scene

        scene.add(plane);//把plane添加到scene

        // create a cube 方块

        var cubeGeometry = new THREE.CubeGeometry(4,4,4);

        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//线框属性：true

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // position the cube

        cube.position.x=-4;

        cube.position.y=3;

        cube.position.z=0;

        // add the cube to the scene

        scene.add(cube);

        //create a  sphere 球体

        var sphereGeometry = new THREE.SphereGeometry(4,20,20);

        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});

        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        // position the sphere

        sphere.position.x=20;

        sphere.position.y=4;

        sphere.position.z=2;

        // add the sphere to the scene

        scene.add(sphere);

        // position and point the camera to the center of the scene指定相机的位置，即悬挂在场景的上方，以确保我们能够拍摄到这些物体

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);//使用lookat()函数指向场景的中心

        // add the output of the renderer to the html element

        $("#WebGL-output").append(renderer.domElement);//使用jQuery来选择正确的输出元素

        // render the scene

        renderer.render(scene, camera);//并告诉渲染器使用相机把场景渲染出来

    });

</script>

</body>

</html>

three.js 场景入门的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  2. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  3. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  4. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  5. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  6. HTML5游戏开发引擎Pixi.js新手入门讲解

    在线演示 本地下载 ​这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

  7. Node.js开发入门—使用cookie保持登录

    这次来做一个站点登录的小样例,后面会用到. 这个演示样例会用到Cookie.HTML表单.POST数据体(body)解析. 第一个版本号,我们的用户数据就写死在js文件中. 第二个版本号会引入Mong ...

  8. Node.js开发入门—HelloWorld再分析

    在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...

  9. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

随机推荐

  1. [Android Pro] root用户删除文件提示：Operation not permitted

    reference to : http://blog.csdn.net/evanbai/article/details/6187578 一些文件看上去可能一切正常,但当您尝试删除的时候,居然也会报错, ...

  2. hdu1162(最小生成树 prim or kruscal)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 意义:给出一些点,用线问使所有点直接或间接连通,需要多长: 思路:裸最小生成树: 法1: pri ...

  3. Xcodeproject详解

    前言 在 iOS 开发过程中,我们经常会在 Xcode 里面做一些配置,比如添加系统库.第三方库,修改证书配置文件,修改编译属性等等. 在这个过程里面,一般大家仅仅只是根据经验来配置这些,并没有比较清 ...

  4. 对于spark以及hadoop的几个疑问(转)

    Hadoop是啥?spark是啥? spark能完全取代Hadoop吗? Hadoop和Spark属于哪种计算计算模型(实时计算.离线计算)? 学习Hadoop和spark,哪门语言好? 哪里能找到比 ...

  5. hdu 5018 Revenge of Fibonacci

    大水题 #include<time.h> #include <cstdio> #include <iostream> #include<algorithm&g ...

  6. Clr Via C#读书笔记---程序集的加载和反射

    #1 加载程序集 Assembly.Load: public class Assembly { public static Assembly Load(AssemblyName assemblyRef ...

  7. jQueryEasyUi验证

        多重验证: { field : 'startPort', title : "起始端口", editor: "text", width : 50, edi ...

  8. C# 根据ADO.NET数据库连接字符串构建EntityFrame数据库连接字符串

    为了保持开发效率,以及保持代码优雅,项目中引用了EntityFrame.但是又因为某些报表功能需要大量计算,所以又要求直接使用ADO.NET,调用存储过程进行计算. 于是乎webconfig文件中就会 ...

  9. 让那些为Webkit优化的网站也能适配IE10（转载）

    转载地址:http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html 特 ...

  10. 在ubuntu上搭建开发环境6---安装和使用vim及其插件（Pathogen和NERDTree）

    2015.09.08 更为详细的配置vim的方法,请参见我的新整理的文章:http://segmentfault.com/a/1190000003722928 Vim安装 命令: sudo apt-g ...