index.html
+0
-1
diff --git a/index.html b/index.html
index 7267dd6..4f87b66 100644
@@ -6,7 +6,6 @@
<title>lines</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
src/main.ts
+62
-0
diff --git a/src/main.ts b/src/main.ts
index 4fe51c7..35daa31 100644
@@ -1 +1,63 @@
import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { NURBSCurve } from "three/examples/jsm/curves/NURBSCurve.js";
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 1, 10);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.update();
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
const scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff));
scene.add(
(() => {
const lights = new THREE.DirectionalLight(0xffffff, 1);
lights.position.set(-1, -3, -2);
return lights;
})(),
);
scene.add(
(() => {
const lights = new THREE.DirectionalLight(0xffffff, 3);
lights.position.set(1, 3, 2);
return lights;
})(),
);
scene.add(
(() => {
const curve = new NURBSCurve(
3,
[0, 0, 0, 0, 1, 1, 1, 1],
[
new THREE.Vector4(-1, -1, 0, 1),
new THREE.Vector4(-1, 1, 0, 1),
new THREE.Vector4(1, 1, 0, 1),
new THREE.Vector4(1, -1, 0, 1),
],
);
const geometry = new THREE.TubeGeometry(curve, 16, 0.1, 8, false);
const material = new THREE.MeshPhongMaterial({ color: 0xbada55, side: THREE.DoubleSide });
return new THREE.Mesh(geometry, material);
})(),
);
window.requestAnimationFrame(animate);
function animate() {
controls.update();
renderer.render(scene, camera);
window.requestAnimationFrame(animate);
}
src/style.css
+16
-0
diff --git a/src/style.css b/src/style.css
index ccb4b59..be4af90 100644
@@ -11,6 +11,12 @@
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
width: 100vw;
height: 100vh;
transition: background-color 0.4s ease-in;
}
@media (prefers-color-scheme: light) {
@@ -19,3 +25,13 @@
background-color: #ffffff;
}
}
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
margin: 0;
}