公開日： 2018/11/07
最終更新日：2018/11/07

【Three.js】静止画面表示のサンプル

threejs
three.jsをコーディングするなら、コード補完も使えるTypeScriptでの開発が断然おすすめ！
【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

単純なオブジェクトをレンダリングするサンプル。
アニメーションなどはなし。

1 デモ
2 JavaScript
3 TypeScript

デモ

このページはiframe対応ブラウザで表示してください。

JavaScript

function init() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE));
    renderer.setSize(window.innerWidth, window.innerHeight);
    var axes = new THREE.AxisHelper(20);
    scene.add(axes);
    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = 15;
    plane.position.y = 0;
    plane.position.z = 0;
    scene.add(plane);
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = -4;
    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);
    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
}
;
window.onload = init;

function init() {

var scene = new THREE.Scene();

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

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0xEEEEEE));

renderer.setSize(window.innerWidth, window.innerHeight);

var axes = new THREE.AxisHelper(20);

scene.add(axes);

var planeGeometry = new THREE.PlaneGeometry(60, 20);

var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });

var plane = new THREE.Mesh(planeGeometry, planeMaterial);

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

plane.position.y = 15;

plane.position.y = 0;

plane.position.z = 0;

scene.add(plane);

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

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

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

cube.position.x = -4;

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);

document.getElementById("WebGL-output").appendChild(renderer.domElement);

renderer.render(scene, camera);

}

;

window.onload = init;

TypeScript

/// <reference path="three.d.ts" />

function init() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE));
    renderer.setSize(window.innerWidth, window.innerHeight);

    var axes = new THREE.AxisHelper(20);
    scene.add(axes);

    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = 15;
    plane.position.y = 0;
    plane.position.z = 0;

    scene.add(plane);

    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = -4;
    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);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
};
window.onload = init;

/// <reference path="three.d.ts" />