Three.js 3D空间内调整摄像点参数的演示

Learning Three JS Mario

Three.js

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2881
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var el = {
    body: document.querySelector('body'),
    marioGroup: undefined,
    camX: document.getElementById('camera_x'),
    camY: document.getElementById('camera_y'),
    camZ: document.getElementById('camera_z'),
    camRotX: document.getElementById('camera-rotation_x'),
    camRotY: document.getElementById('camera-rotation_y'),
    camRotZ: document.getElementById('camera-rotation_z'),
};

var m = {
    x: 0,
    y: 0
};

var scene = new THREE.Scene(),
    camera,
    texture;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load("https://cdn.pbrd.co/images/15NeKduEG.png");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);

/* ---------------------------------------------------------
Stuff making functions
----------------------------------------------------------*/
function makeSky() {
    var geometry = new THREE.SphereGeometry(70, 32, 32);
    var material = new THREE.MeshBasicMaterial({
        color: 0x5c94fc,
        side: THREE.DoubleSide
    });
    var sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);
}

function makeDirectionalLight() {
    var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 10, 0);
    directionalLight.shadowCameraVisible = true;
    directionalLight.castShadow = true;
    scene.add(directionalLight);
}

function makeLight() {
    var light = new THREE.AmbientLight(0x404040, 2); // soft white light
    light.castShadow = true;
    scene.add(light);
}

function makePointLight() {
    var light = new THREE.PointLight(0xff0000, 1, 100);
    light.position.set(50, 50, 50);
    scene.add(light);
}

function makeCamera() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
}

function makeCube($x, $y, $z, $color) {
    var geometry = new THREE.BoxGeometry(1, 1, 4);
    var material = new THREE.MeshLambertMaterial({
        color: $color || 0x00ff00
            //map: texture
    });
    var cube = new THREE.Mesh(geometry, material);

cube.castShadow = true;
    cube.receiveShadow = true;
    cube.position.set($x, $y, 0);

return cube;

// scene.add( cube );
}

function makePlane() {

var geometry = new THREE.PlaneGeometry(50, 60, 32);
    var material = new THREE.MeshLambertMaterial({
        //map: texture,
        color: 0xc84c0c,
        side: THREE.DoubleSide
    });
    var plane = new THREE.Mesh(geometry, material);

plane.castShadow = true;
    plane.receiveShadow = true;
    plane.position.set(10, 0, -10);

scene.add(plane);
}

/* ---------------------------------------------------------
Mario
----------------------------------------------------------*/
function makeMario() {

// Mario 2D pixel map
    var marioString = 'wwwrrrrrwwwwwwrrrrrrrrrwwwgggyygywwwwgygyyygyyywwgyggyyygyyywggyyyyggggwwwwyyyyyyywwwwggrgggwwwwwgggrggrgggwggggrrrrggggyygryrryrgyyyyyrrrrrryyyyyrrrrrrrryywwrrrwwrrrwwwgggwwwwgggwggggwwwwgggg';

//create an empty container for the group
    el.marioGroup = new THREE.Object3D();

// Loop Mario string DNA
    for (var i = 0; i < marioString.length; i++) {

if (marioString[i] !== 'w' && marioString[i] !== ' ') {

//add a mesh with geometry to it
            el.marioGroup.add(makeCube(x, y, 0, c));
        }

el.marioGroup.castShadow = true;
        el.marioGroup.receiveShadow = true;
        //when done, add the group to the scene
        scene.add(el.marioGroup);

}
}

/* ---------------------------------------------------------
Init stuff
----------------------------------------------------------*/
makeSky();
// makeCube();
// makePlane();
makeCamera();
makeDirectionalLight();
makeLight();
//makePointLight();
makeMario();
render();

/* ---------------------------------------------------------
Render Function
----------------------------------------------------------*/
function render() {
    requestAnimationFrame(render);

camera.position.x = el.camX.value;
    camera.position.y = el.camY.value;
    camera.position.z = el.camZ.value;

camera.rotation.x = el.camRotX.value;
    camera.rotation.y = el.camRotY.value;
    camera.rotation.z = el.camRotZ.value;

//el.marioGroup.rotation.x += .1;
    el.marioGroup.rotation.y += .02;

//camera.position.z = m.x;
    //camera.position.x = m.y;

// console.log(camera.position);

//cube.rotation.x += 0.01;
    //cube.rotation.y += 0.01;

renderer.render(scene, camera);
}

/* ---------------------------------------------------------
Mouse events
----------------------------------------------------------*/

el.body.addEventListener('mousemove', function(ev) {
    m.x = ((window.innerWidth / 360) * ev.clientY) / 1000;
    m.y = ((window.innerHeight / 360) * ev.clientX) / 1000;
    //console.log(m.x, m.y);
});

编译

CSS

HTML

Learning Three JS Mario

Three.js

编辑器支持Emmet

快捷键

Learning Three JS Mario

Three.js

Three.js 3D手机和内置移动网站视频内容展示

Three.js 3D低多边形云演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：