zoukankan      html  css  js  c++  java
  • Three.js

    you can create cameras, objects, lights, materials and more , and you have a choice of rendrer,

    decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG,  And since it's open source

    have at least a passing knowledge of 3D, and reasonable proficiency with Javascript.

    1 A scene

    2  A render

    3 A camera

    4  An Object or two (with materials)

    SUPPORT

    Chrome supports Canvas, WebGL and SVG, and it's blazingly fast

    SET THE SCENE

    all the rendering technologies  canvas or WebGL,

    WebGL  runs on your grahics card's GPU

    YOur CPU an concentrate on other non-rendering tasks like any physics or user interaction

    your're trying to do.

    Irrespective  of your chosen render you should bear

    in mind that the JS will need to optimised for performance

    3D isn't a lightweight task for a  browser(and it's awesome that it's even possible )

    any bottlenecks are in your code, and remove them if you can!

    setting up a scene  

    var WIDTH = 400;

    HEIGHT = 300;

    var VIEW_ANGLE = 45,

    ASPECT = WIDTH/HEIGHT,

    NEAR =0.1,

    FAR = 10000;

    var $container = $('#container');

    var render = new  THREE.WEBGLRender();

    var camera = new THREE.PerspectiveCamera(

      VIEW_ANGLE,

      ASPECT,

      NEAR,

      FAR);

    var scene = new THREE.Scene();

    scene.add(camera);

    camera.position.z = 300;

    render.setSize(WIDTH,HEIGHT);

    $container.append(renderer.domElement);

    4 MAKING A MESH

    So we have a scene, a camera and a render(I opted for a WebGL one in my sample code )

    Primitives are geometric meshes relatively basic ones like Spheres , Planes, Cubes and Cylinders .....

    var radius = 50,

      segments = 16,

      rings = 16;

    var sphere = new THREE.Mesh(

      new THREE.SphereGeometry(radius,segments,rings),sphereMaterial

    );

    scene.add(sphere);

    5. METARIALS

    1 "Basic" - which just means that it renders unlit  as far as i can tell

    Lambert

    3 Phong

    var sphereMaterial =

    new THREE.MeshLambertMaterial({color:0xcc0000});

    It's worth pointing out as well that there are other properties you can specify when you create a material besides the colorr

    6.  LIGHTS!

    a red circle. Even though we have a Lambert material applied

    there's no light in  the scene so by default

    There.js will revert to a full ambient light.

    which is the same as flat colouring . let's fix

    that with a simple point of light:

    var pointLight =

    new THREE.PointLight(0xFFFFFF);

    pointLight.position.x = 10;

    pointLight.position.y = 50;

    pointLight.position.z = 130;

    scene.add(pointLight);

    renderer.render(scene,camera)

    8 COMMON OBJECT PROPERTIES

    inherit from OBject3D 

    position, rotation  and scale information.

    our Sphere  is a Mesh which inherits from Object 3D, to which it adds its own properties:geometry and materials.

    sphere.geometry.vertices

    sphere.rotation

    sphere.scale

    DIRTY LITTLE SECRETS

    I just want to quickly point out  a quick gotcha

    for there.js   

    sphere.geometry.dynamic = true;

    sphere.geometry._dirtyVertices = true;

    sphere.geometry._dirtyNormals = true  

  • 相关阅读:
    091122杂记
    20100304我的碎碎念
    写给自己
    开始学习AGG
    找两个数组中的相同元素
    要多写代码了
    [翻译] AGG Reference 之 Basic Renderers(基础渲染器)
    在博客园日志中显示数学公式(旧,ASCIIMathML.js版说明)
    091128日志(博客园博客显示数学公式的方法!)
    与临时对象的斗争(上)
  • 原文地址:https://www.cnblogs.com/yushunwu/p/2775066.html
Copyright © 2011-2022 走看看