grafic/3d.html at main · makrand999/grafic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Cone with Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js",
                "three/examples/jsm/controls/OrbitControls": "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
</head>
<body>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

        // Set up the scene
        const params = new URLSearchParams(window.location.search);
        const inclinationHP = parseFloat(params.get('inclinationHP')) || 0;
        const scene = new THREE.Scene();

        // Set up the camera
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 5); // Position the camera to view the scene

        // Set up the renderer
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true; // Enable shadow maps
        document.body.appendChild(renderer.domElement);

        // Set up orbit controls to allow 360 view
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.update();

        // Create the cone geometry and material
        const coneGeometry = new THREE.ConeGeometry(1, 2, 32);
        const coneMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
        const cone = new THREE.Mesh(coneGeometry, coneMaterial);

        // Enable shadow casting for the cone
        cone.castShadow = true;

        // Rotate the cone by 50 degrees (50 * Math.PI / 180 radians) around the z-axis
        cone.rotateZ(inclinationHP * Math.PI / 180);
        scene.add(cone);

        // Create the horizontal plane geometry and material
        const horizontalPlaneGeometry = new THREE.PlaneGeometry(10, 10);
        const horizontalPlaneMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
        const horizontalPlane = new THREE.Mesh(horizontalPlaneGeometry, horizontalPlaneMaterial);
        horizontalPlane.rotation.x = -Math.PI / 2; // Rotate to lie flat
        horizontalPlane.position.set(0, -2, 0); // Adjust position to lie flat

        // Enable shadow receiving for the horizontal plane
        horizontalPlane.receiveShadow = true;
        scene.add(horizontalPlane);

        // Create the vertical plane geometry and material
        const verticalPlaneGeometry = new THREE.PlaneGeometry(10, 10);
        const verticalPlaneMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
        const verticalPlane = new THREE.Mesh(verticalPlaneGeometry, verticalPlaneMaterial);
        verticalPlane.position.set(0, 3, -5); // Position to intersect the cone
        verticalPlane.receiveShadow = true; // Enable shadow receiving for the vertical plane
        scene.add(verticalPlane);

        // Add a directional light to cast shadow from the top
        const lightTop = new THREE.DirectionalLight(0xffffff, 1);
        lightTop.position.set(0, 10, 5); // Position the light above the scene
        lightTop.castShadow = true; // Enable shadow casting for the light
        lightTop.target = cone; // Ensure the light is directed at the cone
        scene.add(lightTop);

        // Add a directional light to cast shadow from the front
        const lightFront = new THREE.DirectionalLight(0xffffff, 1);
        lightFront.position.set(0, 0, 10); // Position the light in front of the cone
        lightFront.castShadow = true; // Enable shadow casting for the light
        lightFront.target = cone; // Ensure the light is directed at the cone
        scene.add(lightFront);

        // Set up shadow properties for the lights
        [lightTop, lightFront].forEach(light => {
            light.shadow.mapSize.width = 1024;
            light.shadow.mapSize.height = 1024;
            light.shadow.camera.near = 0.5;
            light.shadow.camera.far = 50;
        });

        // Add an ambient light to soften shadows
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);

            // Update controls
            controls.update();

            // Render the scene
            renderer.render(scene, camera);
        }

        // Start animation
        animate();

        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>