64 Three.jsはJSON形式でモデルを保存してロードします.
19666 ワード
前言
外部資源から幾何学体をロードすることを学びます.まず、
簡単なケース
ケースビューの住所:http://www.wjceo.com/blog/threejs/2018-03-15/124.html
保存したファイルを
外部資源から幾何学体をロードすることを学びます.まず、
Three.jsのJSON形式のファイルをどのように保存し、ロードするかを学びます.簡単なケース
ケースビューの住所:http://www.wjceo.com/blog/threejs/2018-03-15/124.html
Three.jsにおけるJSONファイルの導出は非常に容易であり、追加のライブラリの導入は不要である.あなたがしたいのはTHREE.MeshをJSONにエクスポートするだけです.コードは以下の通りです.var result = knot.toJSON();
localStorage.setItem("json", JSON.stringify(result));localStorageにファイルを保存し、保存前に転送されるJSONオブジェクトをJSON文字列に変換しました.保存したファイルを
Three.jsにどうやって導入しますか?論理は、ローカル記憶からコンテンツを取り出してJSONオブジェクトに変換し、THREE.ObjectLoaderオブジェクト内の方法を使用して、オブジェクトをThree.jsが識別できるモデルオブジェクトに変換し、シーンに入れる.コードは以下の通りである.var json = localStorage.getItem("json");
if (json) {
var loadedGeometry = JSON.parse(json);
var loader = new THREE.ObjectLoader();
loadedMesh = loader.parse(loadedGeometry);
loadedMesh.position.x -= 50;
scene.add(loadedMesh);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
style>
head>
<body onload="draw();">
body>
<script src="/lib/three.js">script>
<script src="/lib/js/libs/stats.min.js">script>
<script src="/lib/js/libs/dat.gui.min.js">script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(new THREE.Color(0x000000)); //
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.x = -25;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(new THREE.Vector3(-25, 0, 0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
}
function initModel() {
// （ ）
var object = new THREE.AxesHelper(500);
//scene.add(object);
}
//
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
// gui
var controls,knot,loadedMesh;
function initGui() {
//
controls = {
"radius": 13,
"tube": 1.7,
"radialSegments": 156,
"tubularSegments": 12,
"p": 3,
"q": 4,
"heightScale": 3.5,
"rotate": false,
redraw: function () {
//
if (knot) scene.remove(knot);
//
///
///
///
///
///p\Q: knot( ) , ,P .
///p\Q: knot( ) , ,Q .
/// . 1
var geom = new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q), controls.heightScale);
//
knot = createMesh(geom);
//
scene.add(knot);
},
save:function () {
console.log(knot);
var result = knot.toJSON();
localStorage.setItem("json", JSON.stringify(result));
},
load:function () {
scene.remove(loadedMesh);
var json = localStorage.getItem("json");
if (json) {
var loadedGeometry = JSON.parse(json);
var loader = new THREE.ObjectLoader();
loadedMesh = loader.parse(loadedGeometry);
loadedMesh.position.x -= 50;
scene.add(loadedMesh);
console.log(loadedMesh);
}
}
};
var gui = new dat.GUI();
// gui ，gui.add( ， ， ， ）gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
var loadFolder = gui.addFolder(" / ");
loadFolder.add(controls, "save");
loadFolder.add(controls, "load");
var meshFolder = gui.addFolder(" ");
meshFolder.add(controls, 'radius', 0, 40).onChange(controls.redraw);
meshFolder.add(controls, 'tube', 0, 40).onChange(controls.redraw);
meshFolder.add(controls, 'radialSegments', 0, 400).step(1).onChange(controls.redraw);
meshFolder.add(controls, 'tubularSegments', 1, 20).step(1).onChange(controls.redraw);
meshFolder.add(controls, 'p', 1, 10).step(1).onChange(controls.redraw);
meshFolder.add(controls, 'q', 1, 15).step(1).onChange(controls.redraw);
meshFolder.add(controls, 'heightScale', 0, 5).onChange(controls.redraw);
meshFolder.add(controls, 'rotate');
controls.redraw();
}
var step = 0;
function render() {
if (controls.rotate) {
knot.rotation.y = step += 0.01;
}
renderer.render(scene, camera);
}
// canvas
function generateSprite() {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(255,255,255,1)');
gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
gradient.addColorStop(1, 'rgba(0,0,0,1)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
//
function createPointCloud(geom) {
var material = new THREE.PointCloudMaterial({
color: 0xffffff,
size: 3,
transparent: true,
blending: THREE.AdditiveBlending,
map: generateSprite(),
depthTest: false
});
var cloud = new THREE.Points(geom, material);
cloud.sortParticles = true;
return cloud;
}
//
function createMesh(geom) {
//
var meshMaterial = new THREE.MeshNormalMaterial({wireframe: true});
meshMaterial.side = THREE.DoubleSide;
//
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);
return mesh;
}
//
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
render();
//
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initStats();
initGui();
animate();
window.onresize = onWindowResize;
}
script>
html>