卜若的代码笔记-webgl系列-第四章：适用threejs库创建你的第一个Cube

本文链接：https://blog.csdn.net/qq_37080133/article/details/100664201

1 非常不好意思，因为在下实在是太菜了，所以只能先使用threejs了

你如果要使用three.js请先下载这个库

2 让我们建立我们的第一个demo

2.1 View三要素：Scene,Camera,Renderer:

function create(div) {

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,1, 0.1, 500);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(200, 200);
    renderer.setClearColor(0xFFFFFF, 1.0);
    div.appendChild(renderer.domElement);

    var View  = {};
    View.scene = scene;
    View.camera = camera;
    View. renderer = renderer;
    return View;
}

2.2 渲染对象(以后简称GameObject)两要素：Geometry(几何),Material(材质)

function Color(r,g,b) {

    var color = {};
    color.r = r;
    color.g = g;
    color.b = b;

    color.ox = (color.r << 16) | (color.g << 8) | color.b;

    return color;
}
function Vector3(x,y,z) {

    var vector3 = {};
   vector3.x = x;
   vector3.y = y;
   vector3.z = z;

    return vector3;
}
function createCube(color,size) {
    var geometry = new THREE.CubeGeometry(size.x,size.y,size.z);

    var material = new THREE.MeshBasicMaterial({color: color.ox});

    var cube = new THREE.Mesh(geometry, material);

    return cube;
}

2.3 动画循环效果

var op;
var opView;
function frame() {


    op();
    opView.renderer.render(opView.scene,opView.camera);
    requestAnimationFrame(frame);
}

2.4 demo


function demo1(divItem) {
    var View =   create(divItem);

    var color = Color(255,105,180);
    var size = Vector3(1,1,1);
    var cube = createCube(color,size);
    View.scene.add(cube);

    View.camera.position.z = 3;

    op  = function(){
        cube.rotation.x += 0.1;

    }
    opView = View;
    frame();

}

3 集成与测试

3.1 js代码



function create(div) {

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,1, 0.1, 500);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(200, 200);
    renderer.setClearColor(0xFFFFFF, 1.0);
    div.appendChild(renderer.domElement);

    var View  = {};
    View.scene = scene;
    View.camera = camera;
    View. renderer = renderer;
    return View;
}

function Color(r,g,b) {

    var color = {};
    color.r = r;
    color.g = g;
    color.b = b;

    color.ox = (color.r << 16) | (color.g << 8) | color.b;

    return color;
}
function Vector3(x,y,z) {

    var vector3 = {};
   vector3.x = x;
   vector3.y = y;
   vector3.z = z;

    return vector3;
}
function createCube(color,size) {
    var geometry = new THREE.CubeGeometry(size.x,size.y,size.z);

    var material = new THREE.MeshBasicMaterial({color: color.ox});

    var cube = new THREE.Mesh(geometry, material);

    return cube;
}


var op;
var opView;
function frame() {


    op();
    opView.renderer.render(opView.scene,opView.camera);
    requestAnimationFrame(frame);
}

function demo1(divItem) {
    var View =   create(divItem);

    var color = Color(255,105,180);
    var size = Vector3(1,1,1);
    var cube = createCube(color,size);
    View.scene.add(cube);

    View.camera.position.z = 3;

    op  = function(){
        cube.rotation.x += 0.1;

    }
    opView = View;
    frame();

}

3.2 上下文

<!DOCTYPE html>
<html>
<head>
    <title></title>
<!--    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>-->

    <script src="../ThreeJSLib/three.js"></script>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="Treedemo.js"></script>

</head>
<body>
<div id="ca" style="width: 300px;height: 300px;float: right;background: #aa5500">

</div>

<script>

    demo1(document.getElementById("ca"));


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