feat: added task4 in vanilla
This commit is contained in:
parent
eac76917e0
commit
d00ba8cc40
@ -5,13 +5,119 @@
|
||||
<meta charset="utf-8">
|
||||
<title>Task4 vanilla </title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #edf3fa;
|
||||
font-family: "Avenir Next", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#guide {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
z-index: 10;
|
||||
max-width: 300px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#guide h2 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #203448;
|
||||
}
|
||||
|
||||
#step-label {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1b2530;
|
||||
}
|
||||
|
||||
#step-detail {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #4f647a;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #cfd8e3;
|
||||
background: #fff;
|
||||
color: #203448;
|
||||
border-radius: 8px;
|
||||
padding: 7px 9px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #8ea2b8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #203448;
|
||||
border-color: #203448;
|
||||
color: #f4f8fb;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#hint {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
color: #566f86;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="guide">
|
||||
<h2>Task 4: Group Motion</h2>
|
||||
<p id="step-label"></p>
|
||||
<p id="step-detail"></p>
|
||||
|
||||
<div class="row">
|
||||
<button class="step-btn" data-step="0">Step 1</button>
|
||||
<button class="step-btn" data-step="1">Step 2</button>
|
||||
<button class="step-btn" data-step="2">Step 3</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button id="prev-btn">Previous</button>
|
||||
<button id="next-btn">Next</button>
|
||||
</div>
|
||||
|
||||
<p id="hint">Simple parent group animation. Keys: 1, 2, 3.</p>
|
||||
</div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -0,0 +1,166 @@
|
||||
import * as THREE from 'three'
|
||||
|
||||
const scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color(0xedf3fa)
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 100)
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
document.body.appendChild(renderer.domElement)
|
||||
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.8))
|
||||
|
||||
const keyLight = new THREE.DirectionalLight(0xffffff, 1)
|
||||
keyLight.position.set(4, 5, 4)
|
||||
scene.add(keyLight)
|
||||
|
||||
const floor = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(12, 12),
|
||||
new THREE.MeshStandardMaterial({ color: 0xdde7f3, roughness: 0.95 })
|
||||
)
|
||||
floor.rotation.x = -Math.PI / 2
|
||||
floor.position.y = -1.2
|
||||
scene.add(floor)
|
||||
|
||||
const parentGroup = new THREE.Group()
|
||||
|
||||
const leftBox = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(0.9, 0.9, 0.9),
|
||||
new THREE.MeshStandardMaterial({ color: 0x2a9d8f })
|
||||
)
|
||||
leftBox.position.x = -1.1
|
||||
|
||||
const rightSphere = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(0.55, 24, 24),
|
||||
new THREE.MeshStandardMaterial({ color: 0xe76f51 })
|
||||
)
|
||||
rightSphere.position.x = 1.1
|
||||
|
||||
const topCone = new THREE.Mesh(
|
||||
new THREE.ConeGeometry(0.42, 0.85, 24),
|
||||
new THREE.MeshStandardMaterial({ color: 0x457b9d })
|
||||
)
|
||||
topCone.position.set(0, 0.95, 0)
|
||||
|
||||
parentGroup.add(leftBox, rightSphere, topCone)
|
||||
scene.add(parentGroup)
|
||||
|
||||
const STEPS = [
|
||||
{
|
||||
label: 'Step 1: Group at rest',
|
||||
detail: 'Parent group is centered and children keep their offsets.',
|
||||
cameraPosition: [0, 1.7, 6],
|
||||
lookAt: [0, 0, 0],
|
||||
groupPosition: [0, 0, 0],
|
||||
groupRotation: [0, 0, 0],
|
||||
spinSpeed: 0,
|
||||
},
|
||||
{
|
||||
label: 'Step 2: Parent rotation',
|
||||
detail: 'Only parent rotates; children move together without changing local layout.',
|
||||
cameraPosition: [1.7, 1.8, 5.6],
|
||||
lookAt: [0, 0, 0],
|
||||
groupPosition: [0, 0, 0],
|
||||
groupRotation: [0.15, 0.55, 0],
|
||||
spinSpeed: 0.015,
|
||||
},
|
||||
{
|
||||
label: 'Step 3: Parent move + rotate',
|
||||
detail: 'Parent shifts and rotates as one unit while child spacing stays intact.',
|
||||
cameraPosition: [0.6, 2.4, 7],
|
||||
lookAt: [0.4, 0.35, 0],
|
||||
groupPosition: [0.7, 0.4, -0.4],
|
||||
groupRotation: [0.35, 1.2, 0.2],
|
||||
spinSpeed: 0.03,
|
||||
},
|
||||
]
|
||||
|
||||
const targets = {
|
||||
cameraPosition: new THREE.Vector3(),
|
||||
cameraLookAt: new THREE.Vector3(),
|
||||
lookCurrent: new THREE.Vector3(),
|
||||
groupPosition: new THREE.Vector3(),
|
||||
groupRotation: new THREE.Euler(),
|
||||
}
|
||||
|
||||
let currentStepIndex = 0
|
||||
let spinSpeed = 0
|
||||
let initialized = false
|
||||
|
||||
const stepLabel = document.getElementById('step-label')
|
||||
const stepDetail = document.getElementById('step-detail')
|
||||
const stepButtons = Array.from(document.querySelectorAll('.step-btn'))
|
||||
const prevButton = document.getElementById('prev-btn')
|
||||
const nextButton = document.getElementById('next-btn')
|
||||
|
||||
function applyStep(stepIndex) {
|
||||
currentStepIndex = THREE.MathUtils.clamp(stepIndex, 0, STEPS.length - 1)
|
||||
const step = STEPS[currentStepIndex]
|
||||
|
||||
targets.cameraPosition.set(...step.cameraPosition)
|
||||
targets.cameraLookAt.set(...step.lookAt)
|
||||
targets.groupPosition.set(...step.groupPosition)
|
||||
targets.groupRotation.set(...step.groupRotation)
|
||||
spinSpeed = step.spinSpeed
|
||||
|
||||
if (!initialized) {
|
||||
camera.position.copy(targets.cameraPosition)
|
||||
targets.lookCurrent.copy(targets.cameraLookAt)
|
||||
parentGroup.position.copy(targets.groupPosition)
|
||||
parentGroup.rotation.copy(targets.groupRotation)
|
||||
initialized = true
|
||||
}
|
||||
|
||||
stepLabel.textContent = step.label
|
||||
stepDetail.textContent = step.detail
|
||||
|
||||
stepButtons.forEach((button, index) => {
|
||||
button.classList.toggle('active', index === currentStepIndex)
|
||||
})
|
||||
|
||||
prevButton.disabled = currentStepIndex === 0
|
||||
nextButton.disabled = currentStepIndex === STEPS.length - 1
|
||||
}
|
||||
|
||||
stepButtons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
applyStep(Number(button.dataset.step))
|
||||
})
|
||||
})
|
||||
|
||||
prevButton.addEventListener('click', () => applyStep(currentStepIndex - 1))
|
||||
nextButton.addEventListener('click', () => applyStep(currentStepIndex + 1))
|
||||
|
||||
window.addEventListener('keydown', (event) => {
|
||||
if (event.key === '1') applyStep(0)
|
||||
if (event.key === '2') applyStep(1)
|
||||
if (event.key === '3') applyStep(2)
|
||||
})
|
||||
|
||||
applyStep(0)
|
||||
|
||||
function animate() {
|
||||
parentGroup.position.lerp(targets.groupPosition, 0.1)
|
||||
|
||||
parentGroup.rotation.x += (targets.groupRotation.x - parentGroup.rotation.x) * 0.1
|
||||
parentGroup.rotation.y += (targets.groupRotation.y - parentGroup.rotation.y) * 0.1
|
||||
parentGroup.rotation.z += (targets.groupRotation.z - parentGroup.rotation.z) * 0.1
|
||||
|
||||
parentGroup.rotation.y += spinSpeed * 0.2
|
||||
|
||||
camera.position.lerp(targets.cameraPosition, 0.08)
|
||||
targets.lookCurrent.lerp(targets.cameraLookAt, 0.08)
|
||||
camera.lookAt(targets.lookCurrent)
|
||||
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
renderer.setAnimationLoop(animate)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user