three.js | 程式專案 | 橘蘋學習平台

{"id":331664,"student_id":6526,"content":"{\"html\":\"\u003chtml\u003e\\r\\n\\t\u003chead\u003e\\r\\n\\t\\t\u003cmeta charset=\\\"utf-8\\\"\u003e\\r\\n\\t\\t\u003ctitle\u003eMy first three.js app\u003c/title\u003e\\r\\n\\t\\t\u003cstyle\u003e\\r\\n\\t\\t\\tbody { margin: 0; }\\r\\n\\t\\t\u003c/style\u003e\\r\\n\\t\u003c/head\u003e\\r\\n\\t\u003cbody\u003e\\r\\n\\t\\t\u003cscript src=\\\"https://threejs.org/build/three.js\\\"\u003e\u003c/script\u003e\\r\\n\\t\\t\u003cscript\u003e\\r\\n\\t\\t\\tconst scene = new THREE.Scene();\\r\\n\\t\\t\\tconst camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );\\r\\n\\r\\n\\t\\t\\tconst renderer = new THREE.WebGLRenderer();\\r\\n\\t\\t\\trenderer.setSize( window.innerWidth, window.innerHeight );\\r\\n\\t\\t\\tdocument.body.appendChild( renderer.domElement );\\r\\n\\r\\n\\t\\t\\tconst geometry = new THREE.BoxGeometry();\\r\\n\\t\\t\\tconst material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\\r\\n\\t\\t\\tconst cube = new THREE.Mesh( geometry, material );\\r\\n\\t\\t\\tscene.add( cube );\\r\\n\\r\\n\\t\\t\\tcamera.position.z = 5;\\r\\n\\r\\n\\t\\t\\tfunction animate() {\\r\\n\\t\\t\\t\\trequestAnimationFrame( animate );\\r\\n\\r\\n\\t\\t\\t\\tcube.rotation.x += 0.01;\\r\\n\\t\\t\\t\\tcube.rotation.y += 0.01;\\r\\n\\r\\n\\t\\t\\t\\trenderer.render( scene, camera );\\r\\n\\t\\t\\t};\\r\\n\\r\\n\\t\\t\\tanimate();\\r\\n\\t\\t\u003c/script\u003e\\r\\n\\t\u003c/body\u003e\\r\\n\u003c/html\u003e\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"// 創造一個函式指令 h\"}","created_at":"2021-12-26T12:59:32.023+08:00","updated_at":"2021-12-26T13:09:44.530+08:00","name":"three.js","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":46,"hashid":"vngsyqzy8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}