<head>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
</head>
<body>
<div id="myCanvas">
</div>
<div style="display:none">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="1152px" height="1152px" xml:space="preserve"
>
<g>
<path id="sphere"
d="m 169.27424,107.98767 c -4.7949,-6.64344 -11.14577,-11.114546 -18.0287,-13.289926 5.19993,7.600146 4.11066,18.334916 -2.53446,24.185656 -6.75526,5.94773 -16.68832,4.59321 -22.18673,-3.02497 -4.55997,-6.31794 -4.9901,-13.04478 -1.15235,-18.550004 -2.24109,1.231975 -4.40044,2.739404 -6.43766,4.533094 -5.07321,4.46675 -8.57007,9.96672 -10.54907,15.94233 -0.37659,-1.02289 -0.79285,-2.03711 -1.25393,-3.03929 -3.48472,-7.57421 -8.89028,-13.36683 -15.235251,-17.029225 3.706943,8.601405 0.682111,18.873195 -6.894002,23.125255 -7.701679,4.32256 -17.184219,0.78569 -21.18023,-7.8998 -3.313981,-7.2031 -2.50791,-13.887622 2.255346,-18.425969 -2.419852,0.708022 -4.81,1.703643 -7.13263,3.007218 -17.673338,9.919081 -22.698647,32.558631 -13.759117,51.989061 3.722534,8.0911 7.581413,15.30087 14.491689,18.90073 -3.081961,-8.38817 -0.0042,-18.0551 7.286547,-22.14703 7.701668,-4.32255 17.184217,-0.78567 21.180228,7.89981 2.192492,6.22006 1.835258,11.37971 -0.02361,15.30624 1.077134,-0.467 2.144245,-0.99371 3.197174,-1.58466 8.794876,-4.93609 14.964826,-13.30811 17.844266,-22.86817 1.39854,3.76685 3.32766,7.41187 5.77887,10.80807 5.12213,7.09682 10.21758,13.29975 17.64282,15.28808 -4.54888,-7.53035 -3.29835,-17.684 3.09651,-23.3144 6.75526,-5.94771 16.68883,-4.59363 22.18724,3.02454 3.28214,5.60463 3.87354,10.73816 2.76903,14.99781 0.96982,-0.69717 1.91892,-1.45032 2.84245,-2.26344 15.50154,-13.64844 18.09614,-38.52828 5.79557,-55.57101 z" />
</g>
</svg>
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// ページの読み込みを待つ
window.addEventListener('load', init);
function init() {
// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xFDFDFD));
//sceneの大きさの通知
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0,650);
const controls = new THREE.OrbitControls(camera, document.body);
// 滑らかにカメラコントローラーを制御する
controls.enableDamping = true;
controls.dampingFactor = 0.2;
//svgの変換
//svgのパスをとってくる
const svgString = document.querySelector("#sphere").getAttribute("d");
//パスからシェイプに変換
const shape = transformSVGPathExposed(svgString);
console.log(svgString);
//console.log(shape);
const options = {
amount: 10,
bevelThickness: 15,
bevelSize: 2,
bevelSegments: 3,
bevelEnabled: true,
curveSegments: 12,
steps: 1
};
//shapeからジオメトリに変換
const geometory =new THREE.ExtrudeGeometry(shape,options);
const meshMaterial = new THREE.MeshLambertMaterial({color:0xf21170,
opacity: 0.8,
transparent: true,
side: THREE.DoubleSide,});
const mesh = new THREE.Mesh(geometory, meshMaterial);
scene.add(mesh);
// スポッドライト(色, 光の強さ, 距離, 照射角, ボケ具合, 減衰率)
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set( 100, 100, 450 );
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("myCanvas").appendChild(renderer.domElement);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
mesh.rotation.y += 0.02;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
}
</script>
</script>
</body>
</html>
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
var transformSVGPathExposed;
function d3threeD(exports) {
const DEGS_TO_RADS = Math.PI / 180,
UNIT_SIZE = 1;
const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46,
MINUS = 45;
function transformSVGPath(pathStr) {
var paths = [];
var path = new THREE.Shape();
var idx = 1, len = pathStr.length, activeCmd,
x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
x1 = 0, x2 = 0, y1 = 0, y2 = 0,
rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;
function eatNum() {
var sidx, c, isFloat = false, s;
// eat delims
while (idx < len) {
c = pathStr.charCodeAt(idx);
if (c !== COMMA && c !== SPACE)
break;
idx++;
}
if (c === MINUS)
sidx = idx++;
else
sidx = idx;
// eat number
while (idx < len) {
c = pathStr.charCodeAt(idx);
if (DIGIT_0 <= c && c <= DIGIT_9) {
idx++;
continue;
}
else if (c === PERIOD) {
idx++;
isFloat = true;
continue;
}
s = pathStr.substring(sidx, idx);
return isFloat ? parseFloat(s) : parseInt(s);
}
s = pathStr.substring(sidx);
return isFloat ? parseFloat(s) : parseInt(s);
}
function nextIsNum() {
var c;
// do permanently eat any delims...
while (idx < len) {
c = pathStr.charCodeAt(idx);
if (c !== COMMA && c !== SPACE)
break;
idx++;
}
c = pathStr.charCodeAt(idx);
return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
}
var canRepeat;
var enteredSub = false;
var zSeen = false;
activeCmd = pathStr[0];
while (idx <= len) {
canRepeat = true;
switch (activeCmd) {
// moveto commands, become lineto's if repeated
case 'M':
enteredSub = false;
x = eatNum();
y = eatNum();
path.moveTo(x, y);
activeCmd = 'L';
break;
case 'm':
x += eatNum();
y += eatNum();
path.moveTo(x, y);
activeCmd = 'l';
break;
case 'Z':
case 'z':
// z is a special case. This ends a segment and starts
// a new path. Since the three.js path is continuous
// we should start a new path here. This also draws a
// line from the current location to the start location.
canRepeat = false;
if (x !== firstX || y !== firstY)
path.lineTo(firstX, firstY);
paths.push(path);
// reset the elements
firstX = null;
firstY = null;
// avoid x,y being set incorrectly
enteredSub = true;
path = new THREE.Shape();
zSeen = true;
break;
// - lines!
case 'L':
case 'H':
case 'V':
nx = (activeCmd === 'V') ? x : eatNum();
ny = (activeCmd === 'H') ? y : eatNum();
path.lineTo(nx, ny);
x = nx;
y = ny;
break;
case 'l':
case 'h':
case 'v':
nx = (activeCmd === 'v') ? x : (x + eatNum());
ny = (activeCmd === 'h') ? y : (y + eatNum());
path.lineTo(nx, ny);
x = nx;
y = ny;
break;
// - cubic bezier
case 'C':
x1 = eatNum(); y1 = eatNum();
case 'S':
if (activeCmd === 'S') {
x1 = 2 * x - x2; y1 = 2 * y - y2;
}
x2 = eatNum();
y2 = eatNum();
nx = eatNum();
ny = eatNum();
path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
x = nx; y = ny;
break;
case 'c':
x1 = x + eatNum();
y1 = y + eatNum();
case 's':
if (activeCmd === 's') {
x1 = 2 * x - x2;
y1 = 2 * y - y2;
}
x2 = x + eatNum();
y2 = y + eatNum();
nx = x + eatNum();
ny = y + eatNum();
path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
x = nx; y = ny;
break;
// - quadratic bezier
case 'Q':
x1 = eatNum(); y1 = eatNum();
case 'T':
if (activeCmd === 'T') {
x1 = 2 * x - x1;
y1 = 2 * y - y1;
}
nx = eatNum();
ny = eatNum();
path.quadraticCurveTo(x1, y1, nx, ny);
x = nx;
y = ny;
break;
case 'q':
x1 = x + eatNum();
y1 = y + eatNum();
case 't':
if (activeCmd === 't') {
x1 = 2 * x - x1;
y1 = 2 * y - y1;
}
nx = x + eatNum();
ny = y + eatNum();
path.quadraticCurveTo(x1, y1, nx, ny);
x = nx; y = ny;
break;
// - elliptical arc
case 'A':
rx = eatNum();
ry = eatNum();
xar = eatNum() * DEGS_TO_RADS;
laf = eatNum();
sf = eatNum();
nx = eatNum();
ny = eatNum();
if (rx !== ry) {
console.warn("Forcing elliptical arc to be a circular one :(",
rx, ry);
}
// SVG implementation notes does all the math for us! woo!
// http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
// step1, using x1 as x1'
x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
// step 2, using x2 as cx'
var norm = Math.sqrt(
(rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
(rx*rx * y1*y1 + ry*ry * x1*x1));
if (laf === sf)
norm = -norm;
x2 = norm * rx * y1 / ry;
y2 = norm * -ry * x1 / rx;
// step 3
cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;
var u = new THREE.Vector2(1, 0),
v = new THREE.Vector2((x1 - x2) / rx,
(y1 - y2) / ry);
var startAng = Math.acos(u.dot(v) / u.length() / v.length());
if (u.x * v.y - u.y * v.x < 0)
startAng = -startAng;
// we can reuse 'v' from start angle as our 'u' for delta angle
u.x = (-x1 - x2) / rx;
u.y = (-y1 - y2) / ry;
var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
// This normalization ends up making our curves fail to triangulate...
if (v.x * u.y - v.y * u.x < 0)
deltaAng = -deltaAng;
if (!sf && deltaAng > 0)
deltaAng -= Math.PI * 2;
if (sf && deltaAng < 0)
deltaAng += Math.PI * 2;
path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
x = nx;
y = ny;
break;
case ' ':
// if it's an empty space, just skip it, and see if we can find a real command
break;
default:
throw new Error("weird path command: " + activeCmd);
}
if (firstX === null && !enteredSub) {
firstX = x;
firstY = y;
}
// just reissue the command
if (canRepeat && nextIsNum())
continue;
activeCmd = pathStr[idx++];
}
if (zSeen) {
return paths;
} else {
paths.push(path);
return paths;
}
}
transformSVGPathExposed = transformSVGPath;
function applySVGTransform(obj, tstr) {
var idx = tstr.indexOf('('), len = tstr.length,
cmd = tstr.substring(0, idx++);
function eatNum() {
var sidx, c, isFloat = false, s;
// eat delims
while (idx < len) {
c = tstr.charCodeAt(idx);
if (c !== COMMA && c !== SPACE)
break;
idx++;
}
if (c === MINUS)
sidx = idx++;
else
sidx = idx;
// eat number
while (idx < len) {
c = tstr.charCodeAt(idx);
if (DIGIT_0 <= c && c <= DIGIT_9) {
idx++;
continue;
}
else if (c === PERIOD) {
idx++;
isFloat = true;
continue;
}
s = tstr.substring(sidx, idx);
return isFloat ? parseFloat(s) : parseInt(s);
}
s = tstr.substring(sidx);
return isFloat ? parseFloat(s) : parseInt(s);
}
switch (cmd) {
case 'translate':
obj.position.x = Math.floor(eatNum() * UNIT_SIZE);
obj.position.y = Math.floor(eatNum() * UNIT_SIZE);
break;
case 'scale':
obj.scale.x = Math.floor(eatNum() * UNIT_SIZE);
obj.scale.y = Math.floor(eatNum() * UNIT_SIZE);
break;
default:
console.warn("don't understand transform", tstr);
break;
}
}
applySVGTransformExposed = applySVGTransform;
function wrap_setAttribute(name, value) {
}
function wrap_setAttributeNS(namespace, name, value) {
}
var extrudeDefaults = {
amount: 20,
bevelEnabled: true,
material: 0,
extrudeMaterial: 0,
};
function commonSetAttribute(name, value) {
switch (name) {
case 'x':
this.position.x = Math.floor(value * UNIT_SIZE);
break;
case 'y':
this.position.y = Math.floor(value * UNIT_SIZE);
break;
case 'class':
this.clazz = value;
break;
case 'stroke':
case 'fill':
if (typeof(value) !== 'string')
value = value.toString();
this.material.color.setHex(parseInt(value.substring(1), 16));
break;
case 'transform':
applySVGTransform(this, value);
break;
case 'd':
var shape = transformSVGPath(value),
geom = shape.extrude(extrudeDefaults);
this.geometry = geom;
this.geometry.boundingSphere = {radius: 3 * UNIT_SIZE};
this.scale.set(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
break;
default:
throw new Error("no setter for: " + name);
}
}
function commonSetAttributeNS(namespace, name, value) {
this.setAttribute(name, value);
}
function Group(parentThing) {
THREE.Object3D.call(this);
this.d3class = '';
parentThing.add(this);
};
Group.prototype = new THREE.Object3D();
Group.prototype.constructor = Group;
Group.prototype.d3tag = 'g';
Group.prototype.setAttribute = commonSetAttribute;
Group.prototype.setAttributeNS = commonSetAttributeNS;
function fabGroup() {
return new Group(this);
}
function Mesh(parentThing, tag, geometry, material) {
THREE.Mesh.call(this, geometry, material);
this.d3tag = tag;
this.d3class = '';
parentThing.add(this);
}
Mesh.prototype = new THREE.Mesh();
Mesh.prototype.constructor = Mesh;
Mesh.prototype.setAttribute = commonSetAttribute;
Mesh.prototype.setAttributeNS = commonSetAttributeNS;
const SPHERE_SEGS = 16, SPHERE_RINGS = 16,
DEFAULT_COLOR = 0xcc0000;
var sharedSphereGeom = null,
sharedCubeGeom = null;
function fabSphere() {
if (!sharedSphereGeom)
sharedSphereGeom = new THREE.SphereGeometry(
UNIT_SIZE / 2, SPHERE_SEGS, SPHERE_RINGS);
var material = new THREE.MeshLambertMaterial({
color: DEFAULT_COLOR,
});
return new Mesh(this, 'sphere', sharedSphereGeom, material);
}
function fabCube() {
if (!sharedCubeGeom)
sharedCubeGeom = new THREE.CubeGeometry(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
var material = new THREE.MeshLambertMaterial({
color: DEFAULT_COLOR,
});
return new Mesh(this, 'cube', sharedCubeGeom, material);
}
function fabPath() {
// start with a cube that we will replace with the path once it gets created
if (!sharedCubeGeom)
sharedCubeGeom = new THREE.CubeGeometry(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
var material = new THREE.MeshLambertMaterial({
color: DEFAULT_COLOR,
});
return new Mesh(this, 'path', sharedCubeGeom, material);
}
function Scene() {
THREE.Scene.call(this);
this.renderer = null;
this.camera = null;
this.controls = null;
this._d3_width = null;
this._d3_height = null;
}
Scene.prototype = new THREE.Scene();
Scene.prototype.constructor = Scene;
Scene.prototype._setBounds = function() {
this.renderer.setSize(this._d3_width, this._d3_height);
var aspect = this.camera.aspect;
this.camera.position.set(
this._d3_width * UNIT_SIZE / 2,
this._d3_height * UNIT_SIZE / 2,
Math.max(this._d3_width * UNIT_SIZE / Math.sqrt(2),
this._d3_height * UNIT_SIZE / Math.sqrt(2)));
this.controls.target.set(this.camera.position.x, this.camera.position.y, 0);
console.log("camera:", this.camera.position.x, this.camera.position.y,
this.camera.position.z);
//this.camera.position.z = 1000;
};
Scene.prototype.setAttribute = function(name, value) {
switch (name) {
case 'width':
this._d3_width = value;
if (this._d3_height)
this._setBounds();
break;
case 'height':
this._d3_height = value;
if (this._d3_width)
this._setBounds();
break;
}
};
function fabVis() {
var camera, scene, controls, renderer;
// - scene
scene = new Scene();
threeJsScene = scene;
// - camera
camera = scene.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1, 100000);
/*
camera = scene.camera = new THREE.OrthographicCamera(
window.innerWidth / -2, window.innerWidth / 2,
window.innerHeight / 2, window.innerHeight / -2,
1, 50000);
*/
scene.add(camera);
// - controls
// from misc_camera_trackball.html example
controls = scene.controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68];
controls.addEventListener('change', render);
// - light
/*
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set(10, 50, 130);
scene.add(pointLight);
*/
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-50000, 50000, 100000);
scene.add(spotlight);
var backlight = new THREE.SpotLight(0x888888);
backlight.position.set(50000, -50000, -100000);
scene.add(backlight);
/*
var ambientLight = new THREE.AmbientLight(0x888888);
scene.add(ambientLight);
*/
function helperPlanes(maxBound) {
var geom = new THREE.PlaneGeometry(maxBound, maxBound, 4, 4);
for (var i = 0; i < 4; i++) {
var color, cx, cy;
switch (i) {
case 0:
color = 0xff0000;
cx = maxBound / 2;
cy = maxBound / 2;
break;
case 1:
color = 0x00ff00;
cx = maxBound / 2;
cy = -maxBound / 2;
break;
case 2:
color = 0x0000ff;
cx = -maxBound / 2;
cy = -maxBound / 2;
break;
case 3:
color = 0xffff00;
cx = -maxBound / 2;
cy = maxBound / 2;
break;
}
var material = new THREE.MeshLambertMaterial({ color: color });
var mesh = new THREE.Mesh(geom, material);
mesh.position.set(cx, cy, -1);
scene.add(mesh);
}
}
//helperPlanes(UNIT_SIZE * 225);
// - renderer
renderer = scene.renderer = new THREE.WebGLRenderer({
// too slow...
//antialias: true,
});
this.appendChild( renderer.domElement );
// - stats
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
this.appendChild( stats.domElement );
function animate() {
requestAnimationFrame(animate, renderer.domElement);
controls.update();
}
function render() {
renderer.render(scene, camera);
stats.update();
}
animate();
return scene;
};
}
var $d3g = {};
d3threeD($d3g);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.